changes

app/components/imports/AddProductVariant.vue

@@ -11,7 +11,7 @@ watch(product, () => {
 <template>
   <div class="fixed-grid has-12-cols">
     <div class="grid">
-      <div class="cell is-col-span-6 is-col-start-4">
+      <div class="cell is-col-span-8 is-col-start-3">
         <div class="field">
           <label class="label">Sản phẩm</label>
           <SearchBox
@@ -47,6 +47,7 @@ watch(product, () => {
               values:
                 'id,code,product,product__name,color,color__code,color__name,color__hex_code,ram,ram__code,ram__capacity,internal_storage,internal_storage__code,internal_storage__capacity,image,price,note,create_time,update_time',
               filter: { product: product.id },
+              sort: 'id',
             },
           }"
         />

app/components/imports/Color.vue

@@ -6,7 +6,7 @@ const props = defineProps({
 
 <template>
   <div
-    class="w-20 h-4"
+    class="w-full h-4"
     :style="{ backgroundColor: color, outline: '1px solid var(--bulma-grey-85)' }"
   ></div>
 </template>

app/components/imports/Imports.vue

@@ -16,7 +16,7 @@ const activeMenu = ref(menus[1]);
 <template>
   <div class="fixed-grid has-12-cols">
     <div class="grid is-gap-4">
-      <div class="cell is-col-span-2">
+      <div class="cell is-col-span-3">
         <aside class="menu">
           <ul class="menu-list">
             <li
@@ -25,19 +25,36 @@ const activeMenu = ref(menus[1]);
             >
               <a
                 @click="activeMenu = menu"
-                :class="{
-                  'is-active': activeMenu.id === menu.id,
-                }"
+                :class="[
+                  'fs-13',
+                  {
+                    'is-active': activeMenu.id === menu.id,
+                  },
+                ]"
                 >{{ menu.name }}</a
               >
             </li>
           </ul>
         </aside>
       </div>
-      <div class="cell is-col-span-10">
+      <div class="cell is-col-span-9">
         <AddProductForm v-if="activeMenu.id === 'add-product'" />
         <AddProductVariant v-if="activeMenu.id === 'add-product-variant'" />
       </div>
     </div>
   </div>
 </template>
+<style scoped>
+.menu-list a {
+  --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>