body {
  background-color: rgba(0, 0, 0, 0.05);
}
.menu-wrap {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 280px;
  box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.1);
  padding-right: 0.75rem;
  overflow-y: auto;
}
@for $i from 1 through 5 {
  .padding-#{$i} {
    padding-left: 0.5rem * $i !important;
  }
}
.btn {
  border-style: dashed !important;
  &:focus {
    box-shadow: none;
  }
}

const itemComponent = {
  template: `
    <li :class="'padding-' + index" class="py-2">
      <a href="#" class="btn btn-outline-black border-0 border-bottom border-dark text-start rounded-0
        w-100 text-decoration-none p-3" @click.prevent="toggleMenu">
        {{ menu.name }}
      </a>
      <ul v-if="menu.sub.length" v-show="isOpen" class="list-unstyled">
        <MenuItem v-for="item in menu.sub" :key="item.id" :menu="item" :index="index + 1" />
      </ul>
    </li>
  `,
  name: 'MenuItem',
  props: {
    menu: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number
    }
  },
  data() {
    return {
      isOpen: false
    };
  },
  methods: {
    toggleMenu() {
      this.isOpen = !this.isOpen;
    }
  }
};

const menuComponent = {
  template: `
    <ul class="list-unstyled">
      <item-component :menu="menuList" :index="1" />
    </ul>
  `,
  name: 'Menu',
  components: {
    itemComponent
  },
  data() {
    return {
      menuList: {
        id: 0,
        name: '首頁',
        sub: [
          {
            id: 1,
            name: '關於我們',
            sub: [
              {
                id: 11,
                name: '公司介紹',
                sub: []
              }
            ]
          },
          {
            id: 2,
            name: '產品介紹',
            sub: [
              {
                id: 21,
                name: '保濕系列',
                sub: []
              },
              {
                id: 22,
                name: '抗老系列',
                sub: []
              }
            ]
          },
          {
            id: 3,
            name: '線上購物',
            sub: []
          }
        ]      
      }
    };
  }
};

const app = Vue.createApp({
  components: {
    menuComponent
  }
});

app.mount('#app');