qdadm 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "qdadm",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Vue 3 framework for admin dashboards with PrimeVue",
   "author": "quazardous",
   "license": "MIT",

package/src/components/layout/AppLayout.vue

@@ -569,51 +569,8 @@ const showBreadcrumb = computed<boolean>(() => {
   z-index: 10;
 }
 
-/* Nav items - compact, subtle hover */
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: var(--fad-nav-item-padding-y) var(--fad-nav-item-padding-x);
-  padding-left: 1rem;
-  color: var(--p-surface-300, #cbd5e1);
-  text-decoration: none;
-  font-size: var(--fad-font-size-sm);
-  font-weight: var(--fad-font-weight-normal);
-  border-radius: 0;
-  transition: background var(--fad-transition-fast), color var(--fad-transition-fast);
-}
-
-.nav-item span {
-  white-space: nowrap;
-}
-
-.nav-item:hover {
-  background: var(--p-surface-700, #334155);
-  color: var(--p-surface-0, white);
-}
-
-.nav-item-active {
-  background: var(--p-surface-700, #334155);
-  color: var(--p-primary-300, #93c5fd);
-  border-left: 2px solid var(--p-primary-400, #60a5fa);
-  padding-left: calc(1rem - 2px);
-}
-
-.nav-item-active:hover {
-  background: var(--p-surface-600, #475569);
-}
-
-.nav-item i {
-  font-size: var(--fad-nav-icon-size);
-  width: 1.125rem;
-  text-align: center;
-  opacity: 0.8;
-}
-
-.nav-item-active i {
-  opacity: 1;
-}
+/* Nav items are styled in _sidebar.scss (global styles)
+   See .sidebar-nav .nav-item for base styles */
 
 /* -----------------------------------------------------------------------------
    Main Content
@@ -866,25 +823,8 @@ const showBreadcrumb = computed<boolean>(() => {
   opacity: 1 !important;
 }
 
-.sidebar--collapsed .nav-item {
-  padding: 0.5rem 0;
-  gap: 0;
-  border-left: none !important;
-  justify-content: center;
-}
-
-.sidebar--collapsed .nav-item-active {
-  border-left: none !important;
-  padding: 0.5rem 0;
-}
-
-.sidebar--collapsed .nav-item span {
-  display: none;
-}
-
-.sidebar--collapsed .nav-item i {
-  width: auto;
-}
+/* Nav item collapsed styles are in _sidebar.scss (global styles)
+   See .sidebar--collapsed .sidebar-nav .nav-item */
 
 /* Powered-by collapsed: smaller height */
 .sidebar--collapsed #powered-by {
@@ -995,23 +935,7 @@ const showBreadcrumb = computed<boolean>(() => {
     pointer-events: auto;
   }
 
-  .sidebar.sidebar--collapsed .nav-item {
-    justify-content: flex-start;
-    padding: var(--fad-nav-item-padding-y) var(--fad-nav-item-padding-x);
-    padding-left: 1rem;
-    gap: 0.5rem;
-  }
-
-  .sidebar.sidebar--collapsed .nav-item span {
-    display: inline;
-    opacity: 1;
-    width: auto;
-  }
-
-  .sidebar.sidebar--collapsed .nav-item i {
-    font-size: var(--fad-nav-icon-size);
-    width: 1.125rem;
-  }
+  /* Nav item mobile collapsed styles are in _sidebar.scss (global styles) */
 
   .sidebar.sidebar--collapsed #powered-by,
   .sidebar.sidebar--collapsed #user-zone {

package/src/components/layout/defaults/DefaultMenu.vue

@@ -95,7 +95,8 @@ watch(() => route?.path, () => {
 </script>
 
 <template>
-  <nav class="default-menu">
+  <!-- Use sidebar-nav class to inherit global nav-item styles from _sidebar.scss -->
+  <nav class="sidebar-nav">
     <div v-for="section in navSections" :key="section.title || section.label" class="nav-section">
       <div
         class="nav-section-title"
@@ -126,7 +127,10 @@ watch(() => route?.path, () => {
 </template>
 
 <style scoped>
-.default-menu {
+/* DefaultMenu uses sidebar-nav class to inherit global nav-item styles from _sidebar.scss
+   Only component-specific styles remain here */
+
+.sidebar-nav {
   flex: 1;
   overflow-y: auto;
   padding: 1rem 0;
@@ -175,30 +179,6 @@ watch(() => route?.path, () => {
   opacity: 0;
 }
 
-.nav-item {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.625rem 1.5rem;
-  font-size: 0.9375rem;
-  color: var(--p-surface-300, #cbd5e1);
-  text-decoration: none;
-  transition: all 0.15s;
-}
-
-.nav-item:hover {
-  background: var(--p-surface-700, #334155);
-  color: var(--p-surface-0, white);
-}
-
-.nav-item-active {
-  background: var(--p-primary-600, #2563eb);
-  color: var(--p-surface-0, white);
-}
-
-.nav-item i {
-  font-size: 1rem;
-  width: 1.25rem;
-  text-align: center;
-}
+/* Nav item styles are in _sidebar.scss (global styles)
+   See .sidebar-nav .nav-item for base styles */
 </style>

package/src/styles/_sidebar.scss

@@ -252,3 +252,129 @@ $sidebar-box-content-duration: 0.1s;
   opacity: 0;
   transition: opacity 0s;
 }
+
+/* =============================================================================
+   Nav Item - Sidebar navigation items
+
+   Same behavior as SidebarBox:
+   - Icon stays at fixed left position (never moves horizontally)
+   - On close: text disappears immediately
+   - On open: text appears with delayed fade after sidebar is fully open
+   ============================================================================= */
+
+// Nav item icon width
+$nav-item-icon-width: 1.125rem;
+
+// Nav item content left = icon-left + icon-width + gap
+// Icon is centered in collapsed sidebar: (collapsed-width - icon-width) / 2
+// Content starts after icon: icon-left + icon-width + gap = (collapsed-width + icon-width) / 2 + gap
+$nav-item-content-left: calc((var(--fad-sidebar-width-collapsed) + #{$nav-item-icon-width}) / 2 + 0.375rem);
+
+.sidebar-nav .nav-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--fad-nav-item-padding-y) var(--fad-nav-item-padding-x);
+  padding-left: $nav-item-content-left;
+  color: var(--p-surface-300, #cbd5e1);
+  text-decoration: none;
+  font-size: var(--fad-font-size-sm);
+  font-weight: var(--fad-font-weight-normal);
+  border-radius: 0;
+  transition: background var(--fad-transition-fast), color var(--fad-transition-fast), padding var(--fad-transition-slow);
+}
+
+// Icon: FIXED position at left, centered in collapsed sidebar width
+// Position = (collapsed-width - icon-width) / 2 so icon is centered when collapsed
+.sidebar-nav .nav-item i {
+  position: absolute;
+  left: calc((var(--fad-sidebar-width-collapsed) - #{$nav-item-icon-width}) / 2);
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: var(--fad-nav-icon-size);
+  width: $nav-item-icon-width;
+  text-align: center;
+  opacity: 0.8;
+  // No horizontal transition - icon never moves
+}
+
+// Text: delayed fade-in when sidebar opens
+.sidebar-nav .nav-item span {
+  white-space: nowrap;
+  opacity: 1;
+  transition: opacity $sidebar-box-content-duration ease $sidebar-box-content-delay;
+}
+
+.sidebar-nav .nav-item:hover {
+  background: var(--p-surface-700, #334155);
+  color: var(--p-surface-0, white);
+}
+
+.sidebar-nav .nav-item-active {
+  background: var(--p-surface-700, #334155);
+  color: var(--p-primary-300, #93c5fd);
+  border-left: 2px solid var(--p-primary-400, #60a5fa);
+  padding-left: calc(#{$nav-item-content-left} - 2px);
+}
+
+.sidebar-nav .nav-item-active:hover {
+  background: var(--p-surface-600, #475569);
+}
+
+.sidebar-nav .nav-item-active i {
+  opacity: 1;
+}
+
+/* =============================================================================
+   Nav Item - Collapsed state
+   ============================================================================= */
+
+.sidebar--collapsed .sidebar-nav .nav-item {
+  padding: 0.5rem 0;
+  padding-left: $nav-item-content-left; // Keep same padding - icon position doesn't change
+  border-left: none !important;
+}
+
+.sidebar--collapsed .sidebar-nav .nav-item-active {
+  border-left: none !important;
+  padding-left: $nav-item-content-left;
+}
+
+// Text: disappears IMMEDIATELY when closing (no transition)
+.sidebar--collapsed .sidebar-nav .nav-item span {
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0s, visibility 0s; // Instant hide
+}
+
+// Icon: stays at EXACT SAME left position - no movement at all
+// (inherits left: $sidebar-box-icon-left, no change needed)
+
+/* =============================================================================
+   Nav Item - Mobile responsive
+   On mobile, sidebar becomes fullscreen and collapsed state is ignored
+   ============================================================================= */
+
+@media (max-width: 767px) {
+  .sidebar.sidebar--collapsed .sidebar-nav .nav-item {
+    justify-content: flex-start;
+    padding: var(--fad-nav-item-padding-y) var(--fad-nav-item-padding-x);
+    padding-left: $nav-item-content-left; // Keep same padding for absolute icon
+  }
+
+  .sidebar.sidebar--collapsed .sidebar-nav .nav-item span {
+    display: inline;
+    opacity: 1;
+    visibility: visible;
+    width: auto;
+    transition: opacity $sidebar-box-content-duration ease $sidebar-box-content-delay; // Restore delayed fade-in
+  }
+
+  .sidebar.sidebar--collapsed .sidebar-nav .nav-item i {
+    // Keep absolute positioning on mobile too - same centered position
+    position: absolute;
+    left: calc((var(--fad-sidebar-width-collapsed) - #{$nav-item-icon-width}) / 2);
+    font-size: var(--fad-nav-icon-size);
+    width: $nav-item-icon-width;
+  }
+}