changes

app/components/imports/Imports.vue

@@ -1,22 +1,43 @@
 <script setup>
 import AddProductForm from "@/components/imports/AddProductForm.vue";
-import AddProductVariantForm from "@/components/imports/AddProductVariantForm.vue";
-import FileUpload from "@/components/media/FileUpload.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>
-  <FileUpload
-    :type="['file']"
-    class="mb-2"
-    @files="onFiles"
-  >
-    <template #icon>
-      <Icon
-        name="material-symbols:upload-rounded"
-        :size="20"
-      />
-    </template>
-    <span class="font-medium">Import</span>
-  </FileUpload>
-  <AddProductForm />
-  <AddProductVariantForm />
+  <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>