@elderbyte/ngx-starter 20.5.0-alpha.2 → 20.5.0-alpha.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elderbyte/ngx-starter",
-  "version": "20.5.0-alpha.2",
+  "version": "20.5.0-alpha.3",
   "peerDependencies": {
     "@angular/core": "^20.0.0 || ^21.0.0",
     "@angular/common": "^20.0.0 || ^21.0.0",

package/theming/abstracts/_elder-starter-theme.scss

@@ -18,6 +18,8 @@
 @use '../components/elder-table-theme' as elder-table;
 @use '../components/elder-scrollbar-theme' as elder-scrollbar;
 @use '../components/mat-badge-theme' as mat-badge;
+@use '../components/elder-static-nav-theme' as elder-static-nav;
+
 // Create a theme.
 @mixin starter-theme($theme) {
   $theme: elder-set-defaults-fn.validate-and-set-defaults($theme);
@@ -49,4 +51,5 @@
   @include elder-table.theme($theme);
   @include elder-scrollbar.theme();
   @include mat-badge.theme();
+  @include elder-static-nav.theme();
 }

package/theming/components/_elder-static-nav-theme.scss

@@ -0,0 +1,151 @@
+@mixin theme {
+  // Local SCSS Variables
+  $nav-width: 82px;
+  $nav-icon-size: 32px;
+  $nav-icon-container-width: 48px;
+  $nav-icon-container-height: 40px;
+  $nav-icon-border-radius: 10px;
+  $nav-text-width: 66px;
+  $nav-padding-vertical: 12px;
+  $nav-gap-small: 3px;
+  $nav-font-size: 12px;
+  $light-text-color: color-mix(
+    in srgb,
+    var(--md-sys-color-outline) 50%,
+    var(--md-sys-color-on-surface)
+  );
+
+  .elder-static-nav {
+    // Overwrite css variables
+    --elder-nav-item-height: auto;
+    --elder-nav-link-hover-color: transparent;
+    --elder-nav-link-active-color: transparent;
+
+    // Main container layout
+    width: $nav-width;
+    padding: 0 0 0 var(--elder-pane-padding);
+    flex: 1 1 0%;
+    min-width: 0;
+    min-height: 0;
+
+    // Base styles for all elements
+    * {
+      transition: none !important;
+      line-height: 1 !important;
+      text-align: center !important;
+      font-weight: 500;
+      color: $light-text-color !important;
+
+      &:hover {
+        color: var(--md-sys-color-on-surface) !important;
+      }
+    }
+
+    // Typography styles
+    *:not(.mat-icon) {
+      font-size: $nav-font-size !important;
+      text-wrap: wrap;
+      white-space: normal;
+      word-wrap: break-word;
+      word-break: break-word;
+      overflow-wrap: break-word;
+      hyphens: auto;
+      text-align: center;
+    }
+
+    // Layout containers
+    .elder-nav-list-full {
+      max-width: 100%;
+      width: 100%;
+      min-width: unset;
+      justify-content: stretch;
+      align-items: stretch;
+    }
+
+    .mat-mdc-nav-list {
+      padding: 0 !important;
+      overflow-x: hidden !important;
+      overflow-y: auto !important;
+      align-items: stretch !important;
+    }
+
+    .nav-group-items-container {
+      padding: 0 !important;
+      align-items: center;
+    }
+
+    .layout-row {
+      flex-direction: column !important;
+    }
+
+    // Gap utilities
+    .gap-md,
+    .gap-lg {
+      gap: $nav-gap-small !important;
+    }
+
+    // Navigation group buttons
+    .nav-group-button,
+    .nav-group-button-closed {
+      height: auto !important;
+      padding: $nav-padding-vertical 0 0 0 !important;
+      justify-content: center !important;
+      align-items: center !important;
+      text-align: center;
+
+      * {
+        gap: 0 !important;
+      }
+    }
+
+    .nav-group-button-active .mat-icon {
+      background-color: var(--md-sys-color-primary-container) !important;
+    }
+
+    // Navigation links
+    .nav-link {
+      padding: 0 !important;
+      height: unset !important; // Override default 48px height when needed
+
+      span {
+        display: block;
+        text-align: center;
+        width: $nav-text-width;
+      }
+    }
+
+    .nav-link-active {
+      &,
+      * {
+        color: var(--md-sys-color-primary) !important;
+      }
+
+      .mat-icon {
+        background-color: var(--md-sys-color-primary-container) !important;
+      }
+    }
+
+    // Icon styling
+    .nav-group-button .mat-icon,
+    .nav-link .mat-icon {
+      height: $nav-icon-container-height !important;
+      width: $nav-icon-container-width !important;
+      font-size: $nav-icon-size !important;
+      line-height: 1 !important;
+      padding: 4px 8px !important;
+      border-radius: $nav-icon-border-radius !important;
+    }
+
+    // List items
+    .mdc-list-item {
+      padding-top: $nav-padding-vertical !important;
+    }
+  }
+
+  // Menu-specific styling (outside of .elder-static-nav)
+  .nav-group-in-menu .nav-link .mat-icon {
+    // Hide icons in menus to prevent text misalignment
+    // Icons in sub-items typically aren't used and cause layout issues
+    display: none;
+  }
+}