<script setup>
import AddProductVariant from "@/components/imports/AddProductVariant.vue";
import Products from "@/components/imports/Products.vue";
const menus = [
  {
    id: "product",
    name: "Sản phẩm",
  },
  {
    id: "product-variant",
    name: "Phiên bản",
  },
];
const activeMenu = ref(menus[0]);
</script>
<template>
  <div class="fixed-grid has-12-cols">
    <div class="grid is-gap-4">
      <div class="cell is-col-span-2">
        <aside class="menu">
          <ul class="menu-list">
            <li
              v-for="menu in menus"
              :key="menu.id"
            >
              <a
                @click="activeMenu = menu"
                :class="[{ 'is-active': activeMenu.id === menu.id }]"
                >{{ menu.name }}</a
              >
            </li>
          </ul>
        </aside>
      </div>
      <div class="cell is-col-span-10">
        <Products v-if="activeMenu.id === 'product'" />
        <AddProductVariant v-if="activeMenu.id === 'product-variant'" />
      </div>
    </div>
  </div>
</template>
<style scoped>
.menu-list a {
  font-size: 0.95em;
  --bulma-menu-list-link-padding: 0.75em 1.25em;

  &:not(.is-active) {
    --bulma-menu-item-background-l: 95%;
  }
  &.is-active {
    --bulma-menu-item-h: var(--bulma-menu-item-selected-h);
    --bulma-menu-item-s: var(--bulma-menu-item-selected-s);
    --bulma-menu-item-l: var(--bulma-menu-item-selected-l);
  }
}
</style>
