changes

app/components/imports/Imports.vue

@@ -1,22 +1,22 @@
 <script setup>
-import AddProductForm from "@/components/imports/AddProductForm.vue";
 import AddProductVariant from "@/components/imports/AddProductVariant.vue";
+import Products from "@/components/imports/Products.vue";
 const menus = [
   {
-    id: "add-product",
-    name: "Tạo sản phẩm",
+    id: "product",
+    name: "Sản phẩm",
   },
   {
-    id: "add-product-variant",
-    name: "Thêm phiên bản",
+    id: "product-variant",
+    name: "Phiên bản",
   },
 ];
-const activeMenu = ref(menus[1]);
+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-3">
+      <div class="cell is-col-span-2">
         <aside class="menu">
           <ul class="menu-list">
             <li
@@ -25,27 +25,23 @@ const activeMenu = ref(menus[1]);
             >
               <a
                 @click="activeMenu = menu"
-                :class="[
-                  'fs-13',
-                  {
-                    'is-active': activeMenu.id === menu.id,
-                  },
-                ]"
+                :class="[{ 'is-active': activeMenu.id === menu.id }]"
                 >{{ menu.name }}</a
               >
             </li>
           </ul>
         </aside>
       </div>
-      <div class="cell is-col-span-9">
-        <AddProductForm v-if="activeMenu.id === 'add-product'" />
-        <AddProductVariant v-if="activeMenu.id === 'add-product-variant'" />
+      <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) {