fix(FE) : fix review style

components/layout/full/vertical-sidebar/NavGroup/NavGroup.vue

@@ -6,9 +6,9 @@ const props = defineProps({ item: Object });
   <v-list-subheader
     class="smallCap text-uppercase text-subtitle-2 mt-3 font-weight-bold d-flex align-items-center"
   >
-    <span class="mini-icon"
+    <!-- <span class="mini-icon"
       ><DotsIcon size="16" stroke-width="1.5" class="iconClass"
-    /></span>
+    /></span> -->
     <span class="mini-text">{{ $t(props.item.header) }}</span>
   </v-list-subheader>
 </template>

components/layout/full/vertical-sidebar/VerticalSidebar.vue

@@ -96,6 +96,11 @@ function showData(data: any) {
 // MiniSidebar Icons End
 const customizer = useCustomizerStore();
 const sidebarMenu = shallowRef(sidebarItems);
+
+// Toggle mini sidebar
+const toggleMiniSidebar = () => {
+  customizer.SET_MINI_SIDEBAR(!customizer.mini_sidebar);
+};
 </script>
 
 <template>
@@ -106,15 +111,16 @@ const sidebarMenu = shallowRef(sidebarItems);
   <v-navigation-drawer
     v-model="customizer.Sidebar_drawer"
     elevation="0"
-    rail-width="1"
+    rail-width="90"
     app
     top="0"
     class="leftSidebar"
     :rail="customizer.mini_sidebar"
+    :expand-on-hover="customizer.mini_sidebar"
     width="240"
   >
     <!---Logo part -->
-    <div class="pa-4 pb-0">
+    <div class="pa-4 pb-0" :class="{ 'logo-mini': customizer.mini_sidebar }" :style="customizer.mini_sidebar ? '' : ''">
       <Logo />
     </div>
 
@@ -129,7 +135,7 @@ const sidebarMenu = shallowRef(sidebarItems);
               <!---Item Sub Header -->
               <LazyLayoutFullVerticalSidebarNavGroup
                 :item="item"
-                v-if="item.header"
+                v-if="item.header && !customizer.mini_sidebar"
                 :key="item.title"
               />
               <!---If Has Child -->
@@ -151,5 +157,133 @@ const sidebarMenu = shallowRef(sidebarItems);
         </v-list>
       </div>
     </perfect-scrollbar>
+
+    <!-- Toggle Mini Sidebar Button -->
+    <!-- <div class="sidebar-toggle-wrapper">
+      <v-divider class="mb-0"></v-divider>
+      <v-btn
+        @click="toggleMiniSidebar"
+        variant="text"
+        block
+        class="sidebar-toggle-btn"
+        :ripple="false"
+      >
+        <v-tooltip location="right" v-if="customizer.mini_sidebar">
+          <template v-slot:activator="{ props }">
+            <v-icon v-bind="props" size="20">
+              mdi-lock-open-variant-outline
+            </v-icon>
+          </template>
+          <span>Expand Sidebar</span>
+        </v-tooltip>
+        
+        <template v-else>
+          <v-icon size="20" class="mr-2">
+            mdi-lock-outline
+          </v-icon>
+          <span class="text-caption">Minimize</span>
+        </template>
+      </v-btn>
+    </div> -->
   </v-navigation-drawer>
 </template>
+
+<style scoped>
+.sidebar-toggle-wrapper {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: inherit;
+  z-index: 1;
+}
+
+.sidebar-toggle-btn {
+  height: 48px !important;
+  border-radius: 0 !important;
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: 500;
+  opacity: 0.7;
+  transition: all 0.2s ease;
+}
+
+.sidebar-toggle-btn:hover {
+  opacity: 1;
+  background-color: rgba(var(--v-theme-primary), 0.08);
+}
+
+/* Adjust scrollbar height to account for toggle button */
+.scrollnavbar {
+  height: calc(100vh - 120px) !important;
+}
+
+/* Logo styling for mini mode */
+.logo-mini :deep(img) {
+  transition: all 0.3s ease;
+  max-width: 500px;
+  margin-left: 20px;
+  height: auto;
+}
+
+/* Rail mode enhancements */
+:deep(.v-navigation-drawer--rail) {
+  .sidebar-menus {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+  }
+
+  .v-list-item {
+    justify-content: center;
+    padding-left: 18px !important;
+    padding-right: 8px !important;
+    min-height: 48px;
+    margin: 4px 8px;
+  }
+  
+  .v-list-item__prepend {
+    margin-right: 0 !important;
+  }
+  
+  .v-list-item-title {
+    display: none;
+  }
+
+  .v-list-item__append {
+    display: none;
+  }
+
+  .v-list-item--active {
+    border-radius: 12px;
+  }
+
+  .v-list-item__overlay {
+    border-radius: 12px;
+  }
+}
+
+/* Show full menu on hover */
+:deep(.v-navigation-drawer--rail.v-navigation-drawer--expand-on-hover:hover) {
+  .sidebar-menus {
+    padding-left: 16px !important;
+    padding-right: 16px !important;
+  }
+
+  .v-list-item {
+    justify-content: flex-start;
+    padding-left: 16px !important;
+  }
+
+  .v-list-item-title {
+    display: block;
+  }
+  
+  .v-list-item__prepend {
+    margin-right: 16px !important;
+  }
+
+  .v-list-item__append {
+    display: flex;
+  }
+}
+</style>