<script setup>
import AddProductForm from "@/components/imports/AddProductForm.vue";
import AddProductVariant from "@/components/imports/AddProductVariant.vue";
const menus = [
  {
    id: "add-product",
    name: "Tạo sản phẩm",
  },
  {
    id: "add-product-variant",
    name: "Thêm phiên bản",
  },
];
const activeMenu = ref(menus[1]);
</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">
        <AddProductForm v-if="activeMenu.id === 'add-product'" />
        <AddProductVariant v-if="activeMenu.id === 'add-product-variant'" />
      </div>
    </div>
  </div>
</template>
