<template>
  <div>
    <div v-if="display === 'desktop'" class="desktop-menu">
      <div class="accordion-menu">
        <nav class="scrollbars scrollbars-light">
          <ul class="nav" data-accordion-group>
            <slot :selected="selected"></slot>
          </ul>
        </nav>
      </div>
    </div>
    <div v-else-if="display === 'mobile'" class="mobile-menu">
      <div class="drilldown-menu">
        <div class="scrollbars scrollbars-light">
          <nav class="drilldown">
            <ul class="nav">
              <li class="menu-header">
                <div
                  class="horizontal-logo"
                  data-toggle="mobile-menu"
                  title="Close menu"
                >
                  <div class="logo-image" title="NTT"></div>
                  <div class="logo-title">
                    <span v-html="title"></span>
                  </div>
                </div>
              </li>
              <slot :selected="selected"></slot>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <div v-else></div>
  </div>
</template>


<script>
// import MenuSlot from "./MenuSlot.vue";

export default {
  name: "bc-menu",
  props: {
    display: {
      type: String,
      default: "desktop",
    },
    title: {
      type: String,
      default: null,
    },
    selected: {
      type: Object,
      default() {
        return {};
      },
    },
    test: {
      type: String,
      default: "",
    },
  },
  // components: {
  //   MenuSlot,
  // },
  methods: {
    onClick(event) {
      console.log("[Menu] click", event);
      this.$emit("click", event);
    },
  },
};
</script>
