@rhavenside/baseline-ui 1.0.20 → 1.0.21

package/src/components/_sidebar.scss

@@ -52,8 +52,30 @@
   box-shadow: var(--glass-shadow-lg);
   transform: translateX(-100%);
   transition: transform var(--transition-duration-slow) var(--transition-ease-out);
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden; // Let .bl-sidebar-nav handle scrolling
+
+  // Custom Scrollbar for sidebar container (fallback)
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--glass-bg-medium);
+    border-radius: 3px;
+    border: 1px solid var(--glass-border-light);
+
+    &:hover {
+      background: var(--glass-bg-heavy);
+      border-color: var(--glass-border-medium);
+    }
+  }
+
+  scrollbar-width: thin;
+  scrollbar-color: var(--glass-bg-medium) transparent;
 
   // Desktop: Always visible, collapsible
   @media (min-width: 768px) {
@@ -76,11 +98,21 @@
       width: 64px;
 
       .bl-sidebar-header h3,
-      .bl-sidebar-nav .bl-nav-link span:not(.bl-icon) {
+      .bl-sidebar-nav .bl-nav-link span:not(.bl-icon),
+      .bl-nav-group-header {
         opacity: 0;
         width: 0;
         overflow: hidden;
       }
+
+      .bl-sidebar-nav .bl-nav-link {
+        justify-content: center;
+        padding: var(--spacing-sm);
+
+        .bl-icon {
+          margin: 0;
+        }
+      }
     }
   }
 
@@ -162,19 +194,29 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: var(--spacing-md);
-  border-bottom: 1px solid var(--glass-border-light);
+  padding: var(--spacing-lg) var(--spacing-md);
+  border-bottom: 1px solid var(--glass-border-medium);
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  flex-shrink: 0; // Prevent header from shrinking
 
   h3 {
     margin: 0;
-    font-size: var(--font-size-lg);
-    font-weight: var(--font-weight-semibold);
+    font-size: var(--font-size-xl);
+    font-weight: var(--font-weight-bold);
     color: var(--color-text);
+    line-height: var(--line-height-tight);
     transition: var(--transition-base);
   }
+
+  // Version info styling (if present)
+  .bl-sidebar-version {
+    font-size: var(--font-size-xs);
+    color: var(--color-text-muted);
+    font-weight: var(--font-weight-normal);
+    margin-top: var(--spacing-xs);
+  }
 }
 
 // Sidebar Close Button
@@ -217,10 +259,39 @@
 // Sidebar Navigation
 .bl-sidebar-nav {
   flex: 1;
-  padding: var(--spacing-sm);
+  padding: var(--spacing-md);
   overflow-y: auto;
   overflow-x: hidden;
 
+  // Better touch targets on mobile
+  @media (max-width: 767.98px) {
+    padding: var(--spacing-sm);
+  }
+
+  // Custom Scrollbar (Webkit)
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--glass-bg-medium);
+    border-radius: 3px;
+    border: 1px solid var(--glass-border-light);
+
+    &:hover {
+      background: var(--glass-bg-heavy);
+      border-color: var(--glass-border-medium);
+    }
+  }
+
+  // Firefox Scrollbar
+  scrollbar-width: thin;
+  scrollbar-color: var(--glass-bg-medium) transparent;
+
   .bl-nav {
     background: transparent;
     border: none;
@@ -230,30 +301,127 @@
   .bl-nav-link {
     display: flex;
     align-items: center;
-    gap: var(--spacing-sm);
+    gap: var(--spacing-md);
     padding: var(--spacing-sm) var(--spacing-md);
+    margin-bottom: var(--spacing-xs);
     border-radius: var(--tech-border-radius-sm);
     transition: var(--transition-base);
+    position: relative;
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
+    color: var(--color-text);
+    text-decoration: none;
+    min-height: 40px; // Better touch target
+
+    @media (max-width: 767.98px) {
+      padding: var(--spacing-md);
+      min-height: 44px; // iOS touch target recommendation
+    }
 
     span:not(.bl-icon) {
       transition: var(--transition-base);
+      flex: 1;
     }
 
     .bl-icon {
       flex-shrink: 0;
-      width: 20px;
-      height: 20px;
+      width: 18px;
+      height: 18px;
+      color: var(--color-text-muted);
+      transition: var(--transition-base);
+    }
+
+    &:hover {
+      background: var(--glass-bg-light);
+      color: var(--color-text);
+      transform: translateX(2px); // Subtle slide animation
+
+      .bl-icon {
+        color: var(--color-text);
+      }
+    }
+
+    &:active {
+      transform: translateX(1px);
+    }
+
+    &.bl-active {
+      background: var(--glass-bg-medium);
+      color: var(--color-text);
+      font-weight: var(--font-weight-medium);
+      padding-left: calc(var(--spacing-md) - 3px);
+      transform: translateX(0);
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 3px;
+        background: var(--color-accent);
+        border-radius: 0 var(--tech-border-radius-sm) var(--tech-border-radius-sm) 0;
+      }
+
+      .bl-icon {
+        color: var(--color-accent);
+      }
+
+      &:hover {
+        background: var(--glass-bg-heavy);
+        transform: translateX(0); // No slide when active
+      }
+    }
+
+    &:focus {
+      outline: 1px solid var(--color-border-focus);
+      outline-offset: -2px;
     }
   }
 }
 
+// Navigation Groups (Categories)
+.bl-nav-group {
+  margin-bottom: var(--spacing-xl);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:first-child {
+    margin-top: 0;
+  }
+
+  // Visual separator between groups (optional)
+  + .bl-nav-group {
+    padding-top: var(--spacing-md);
+    border-top: 1px solid var(--glass-border-light);
+    margin-top: var(--spacing-lg);
+  }
+}
+
+.bl-nav-group-header {
+  padding: var(--spacing-sm) var(--spacing-md);
+  margin-bottom: var(--spacing-sm);
+  margin-top: 0;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-muted);
+  text-transform: uppercase;
+  letter-spacing: var(--letter-spacing-wide);
+  line-height: var(--line-height-tight);
+  opacity: 0.8; // Subtle appearance
+}
+
 // Sidebar Footer (optional)
 .bl-sidebar-footer {
   padding: var(--spacing-md);
-  border-top: 1px solid var(--glass-border-light);
+  border-top: 1px solid var(--glass-border-medium);
   background: var(--glass-bg-light);
   backdrop-filter: blur(var(--glass-blur-sm));
   -webkit-backdrop-filter: blur(var(--glass-blur-sm));
+  flex-shrink: 0; // Prevent footer from shrinking
+  margin-top: auto; // Push footer to bottom
 }
 
 // Body Scroll Lock (when sidebar is open on mobile)