{"id":30196309,"url":"https://github.com/fsegurai/ngx-sidenav","last_synced_at":"2026-04-16T04:02:53.046Z","repository":{"id":309255479,"uuid":"1032870277","full_name":"fsegurai/ngx-sidenav","owner":"fsegurai","description":"Angular component for creating a resizeable sidenav with dynamic and static content.","archived":false,"fork":false,"pushed_at":"2025-10-02T23:09:41.000Z","size":514,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-10-02T23:21:44.921Z","etag":null,"topics":["angular","component","component-library","menu","navigation","ngx-sidenav","npm","sidenav","typescript","typescript-library"],"latest_commit_sha":null,"homepage":"https://fsegurai.github.io/ngx-sidenav/","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/fsegurai.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-06T00:50:10.000Z","updated_at":"2025-10-02T23:09:45.000Z","dependencies_parsed_at":"2025-08-10T21:55:51.602Z","dependency_job_id":"30d841bf-4965-477f-a134-363652224a96","html_url":"https://github.com/fsegurai/ngx-sidenav","commit_stats":null,"previous_names":["fsegurai/ngx-sidenav"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/fsegurai/ngx-sidenav","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fsegurai%2Fngx-sidenav","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fsegurai%2Fngx-sidenav/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fsegurai%2Fngx-sidenav/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fsegurai%2Fngx-sidenav/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fsegurai","download_url":"https://codeload.github.com/fsegurai/ngx-sidenav/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fsegurai%2Fngx-sidenav/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31870516,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T15:24:51.572Z","status":"online","status_checked_at":"2026-04-16T02:00:06.042Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","component","component-library","menu","navigation","ngx-sidenav","npm","sidenav","typescript","typescript-library"],"created_at":"2025-08-13T05:17:51.905Z","updated_at":"2026-04-16T04:02:53.037Z","avatar_url":"https://github.com/fsegurai.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\" class=\"intro\"\u003e\n  \u003cimg alt=\"NGX Sidenav Logo\" src=\"https://raw.githubusercontent.com/fsegurai/ngx-sidenav/main/public/ngx-sidenav.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\" class=\"intro\"\u003e\n  \u003ca href=\"https://github.com/fsegurai/ngx-sidenav\"\u003e\n      \u003cimg src=\"https://img.shields.io/azure-devops/build/fsegurai/93779823-473d-4fb3-a5b1-27aaa1a88ea2/30/main?label=Build%20Status\u0026\"\n          alt=\"Build Main Status\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/fsegurai/ngx-sidenav/releases/latest\"\u003e\n      \u003cimg src=\"https://img.shields.io/github/v/release/fsegurai/ngx-sidenav\"\n          alt=\"Latest Release\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003cimg alt=\"GitHub contributors\" src=\"https://img.shields.io/github/contributors/fsegurai/ngx-sidenav\"\u003e\n  \u003cimg alt=\"Dependency status for repo\" src=\"https://img.shields.io/librariesio/github/fsegurai/ngx-sidenav\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n    \u003cimg alt=\"GitHub License\" src=\"https://img.shields.io/github/license/fsegurai/ngx-sidenav\"\u003e\n  \u003c/a\u003e\n  \u003cbr\u003e\n  \u003cimg alt=\"Stars\" src=\"https://img.shields.io/github/stars/fsegurai/ngx-sidenav?style=square\u0026labelColor=343b41\"/\u003e \n  \u003cimg alt=\"Forks\" src=\"https://img.shields.io/github/forks/fsegurai/ngx-sidenav?style=square\u0026labelColor=343b41\"/\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@fsegurai/ngx-sidenav\"\u003e\n    \u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dt/@fsegurai/ngx-sidenav\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n`@fsegurai/ngx-sidenav` is a modern, flexible, and feature-rich sidenav component library for Angular applications. Built with Angular's latest features, including signals, standalone components, and the new control flow syntax.\n\n## ✨ Features\n\n- 🎯 **Modern Angular**: Built with Angular 20+ features (signals, standalone components, control flow)\n- 📱 **Responsive Design**: Adaptive layout with collapsible and resizable functionality\n- 🔄 **Dynamic Content**: Support for both declarative HTML and programmatic content management\n- 🎨 **Customizable**: Extensive theming and styling options\n- 🚀 **Performance**: Optimized with OnPush change detection and signals\n- 💾 **Persistent State**: Auto-save/restore sidenav state and navigation stack\n- 🧩 **Component Support**: Render custom Angular components within the sidenav\n- 🎪 **Animations**: Smooth transitions and visual feedback\n\n## 📋 Table of Contents\n\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Usage Patterns](#usage-patterns)\n  - [Declarative HTML Usage](#declarative-html-usage)\n  - [Programmatic Service Usage](#programmatic-service-usage)\n  - [Styling and Theming](#styling-and-theming)\n- [API Reference](#api-reference)\n- [Advanced Examples](#advanced-examples)\n- [Demo Application](#demo-application)\n- [Contributing](#contributing)\n- [License](#license)\n\n## 🚀 Installation\n\n```bash\nnpm install @fsegurai/ngx-sidenav --save\n```\n\n## ⚡ Quick Start\n\n```typescript\nimport { Component, signal } from '@angular/core';\nimport { Sidenav, SidenavMenu, StackMenuItem } from '@fsegurai/ngx-sidenav';\n\n@Component({\n  selector: 'app-root',\n  imports: [Sidenav, SidenavMenu],\n  template: `\n    \u003cngx-sidenav\n      [minWidth]=\"200\"\n      [maxWidth]=\"400\"\n      [canResize]=\"true\"\n      [canCollapse]=\"true\"\u003e\n      \n      \u003cngx-sidenav-menu [items]=\"menuItems()\"\u003e\u003c/ngx-sidenav-menu\u003e\n    \u003c/ngx-sidenav\u003e\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class AppComponent {\n  protected readonly menuItems = signal\u003cStackMenuItem[]\u003e([\n    {\n      label: 'Dashboard',\n      icon: 'dashboard',\n      route: '/dashboard',\n      iconType: 'material'\n    },\n    {\n      label: 'Settings',\n      icon: 'settings',\n      iconType: 'material',\n      children: [\n        { label: 'Profile', route: '/settings/profile' },\n        { label: 'Security', route: '/settings/security' }\n      ]\n    }\n  ]);\n}\n```\n\n## 🔧 Usage Patterns\n\n### Declarative HTML Usage\n\nPerfect for static menu structures defined at compile time:\n\n```typescript\nimport { Component, signal } from '@angular/core';\nimport { Sidenav, SidenavMenu, StackMenuItem } from '@fsegurai/ngx-sidenav';\n\n@Component({\n  selector: 'app-declarative',\n  imports: [Sidenav, SidenavMenu],\n  template: `\n    \u003cngx-sidenav\n      [minWidth]=\"250\"\n      [maxWidth]=\"500\"\n      [initialWidth]=\"320\"\n      [canResize]=\"true\"\n      [canCollapse]=\"true\"\n      [position]=\"'left'\"\n      [backdrop]=\"false\"\n      (opened)=\"onSidenavOpened()\"\n      (closed)=\"onSidenavClosed()\"\n      (resized)=\"onSidenavResized($event)\"\u003e\n\n      \u003c!-- Static menu content --\u003e\n      \u003cngx-sidenav-menu \n        [items]=\"menuItems()\"\n        [parentLabel]=\"'Main Menu'\"\u003e\n      \u003c/ngx-sidenav-menu\u003e\n      \n      \u003c!-- Custom content can also be added --\u003e\n      \u003cdiv class=\"user-profile\"\u003e\n        \u003cimg [src]=\"userAvatar()\" alt=\"User Avatar\"\u003e\n        \u003cspan\u003e{{ userName() }}\u003c/span\u003e\n      \u003c/div\u003e\n    \u003c/ngx-sidenav\u003e\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class DeclarativeComponent {\n  protected readonly menuItems = signal\u003cStackMenuItem[]\u003e([\n    { label: 'Navigation', isTitle: true },\n    {\n      label: 'Analytics',\n      icon: 'analytics',\n      iconType: 'material',\n      badge: '5',\n      badgeColor: 'primary',\n      children: [\n        { \n          label: 'Overview', \n          route: '/analytics/overview',\n          summary: 'View key metrics and insights'\n        },\n        { \n          label: 'Reports', \n          route: '/analytics/reports',\n          icon: 'assessment',\n          badge: 'NEW'\n        },\n        {\n          label: 'Performance',\n          icon: 'speed',\n          children: [\n            { label: 'Load Times', route: '/analytics/performance/load' },\n            { label: 'Memory Usage', route: '/analytics/performance/memory' }\n          ]\n        }\n      ]\n    },\n    {\n      label: 'User Management',\n      icon: 'people',\n      route: '/users',\n      tooltip: 'Manage application users'\n    },\n    { label: 'Tools', isTitle: true },\n    {\n      label: 'Settings',\n      icon: 'settings',\n      disabled: false,\n      children: [\n        { label: 'General', route: '/settings/general' },\n        { label: 'Security', route: '/settings/security' },\n        { label: 'Notifications', route: '/settings/notifications' }\n      ]\n    }\n  ]);\n\n  protected readonly userAvatar = signal('/assets/user-avatar.jpg');\n  protected readonly userName = signal('John Doe');\n\n  onSidenavOpened() {\n    console.log('Sidenav opened');\n  }\n\n  onSidenavClosed() {\n    console.log('Sidenav closed');\n  }\n\n  onSidenavResized(width: number) {\n    console.log('Sidenav resized to:', width);\n  }\n}\n```\n\n### Programmatic Service Usage\n\nIdeal for dynamic content management and complex navigation flows:\n\n```typescript\nimport { Component, inject, signal } from '@angular/core';\nimport { Sidenav, SidenavService, MenuStackItem, ComponentStackItem } from '@fsegurai/ngx-sidenav';\n\n@Component({\n  selector: 'app-programmatic',\n  imports: [Sidenav],\n  template: `\n    \u003cdiv class=\"app-container\"\u003e\n      \u003c!-- Sidenav will be populated programmatically --\u003e\n      \u003cngx-sidenav [canResize]=\"true\"\u003e\n        \u003c!-- Content will be dynamically injected here --\u003e\n      \u003c/ngx-sidenav\u003e\n      \n      \u003cmain class=\"main-content\"\u003e\n        \u003cdiv class=\"controls\"\u003e\n          \u003cbutton (click)=\"showDashboard()\"\u003eDashboard Menu\u003c/button\u003e\n          \u003cbutton (click)=\"showUserProfile()\"\u003eUser Profile\u003c/button\u003e\n          \u003cbutton (click)=\"showSettings()\"\u003eSettings\u003c/button\u003e\n          \u003cbutton (click)=\"showCustomWidget()\"\u003eCustom Widget\u003c/button\u003e\n          \u003cbutton (click)=\"goBack()\" [disabled]=\"!canGoBack()\"\u003e\n            ← Back\n          \u003c/button\u003e\n        \u003c/div\u003e\n        \n        \u003crouter-outlet /\u003e\n      \u003c/main\u003e\n    \u003c/div\u003e\n  `,\n  styles: [`\n    .app-container {\n      display: flex;\n      height: 100vh;\n    }\n    \n    .main-content {\n      flex: 1;\n      padding: 2rem;\n    }\n    \n    .controls {\n      display: flex;\n      gap: 1rem;\n      margin-bottom: 2rem;\n    }\n    \n    .controls button {\n      padding: 0.5rem 1rem;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n    }\n    \n    .controls button:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class ProgrammaticComponent {\n  private readonly sidenavService = inject(SidenavService);\n  \n  // Computed signal to track navigation state\n  protected readonly canGoBack = this.sidenavService.canGoBack;\n\n  showDashboard() {\n    const dashboardMenu: MenuStackItem = {\n      type: 'menu',\n      title: 'Dashboard',\n      items: [\n        {\n          label: 'Overview',\n          icon: 'dashboard',\n          route: '/dashboard/overview',\n          iconType: 'material'\n        },\n        {\n          label: 'Analytics',\n          icon: 'analytics',\n          badge: '12',\n          badgeColor: 'accent',\n          children: [\n            { label: 'Traffic', route: '/dashboard/traffic' },\n            { label: 'Conversions', route: '/dashboard/conversions' },\n            { label: 'Revenue', route: '/dashboard/revenue' }\n          ]\n        },\n        {\n          label: 'Reports',\n          icon: 'assessment',\n          route: '/dashboard/reports'\n        }\n      ]\n    };\n\n      this.sidenavService.push({ type: 'menu', items: dashboardMenu});\n  }\n\n  showUserProfile() {\n    const profileMenu: MenuStackItem = {\n      type: 'menu',\n      title: 'User Profile',\n      badge: '3',\n      badgeColor: 'primary',\n      items: [\n        {\n          label: 'Personal Info',\n          icon: 'person',\n          route: '/profile/personal',\n          summary: 'Manage your personal information'\n        },\n        {\n          label: 'Account Settings',\n          icon: 'settings',\n          children: [\n            { label: 'Password', route: '/profile/password' },\n            { label: 'Two-Factor Auth', route: '/profile/2fa' },\n            { label: 'API Keys', route: '/profile/api-keys' }\n          ]\n        },\n        {\n          label: 'Preferences',\n          icon: 'tune',\n          route: '/profile/preferences'\n        },\n        { label: 'Danger Zone', isTitle: true },\n        {\n          label: 'Delete Account',\n          icon: 'delete_forever',\n          route: '/profile/delete',\n          disabled: false\n        }\n      ]\n    };\n\n      this.sidenavService.push({ type: 'menu', items: profileMenu});\n  }\n\n  showSettings() {\n    const settingsMenu: MenuStackItem = {\n      type: 'menu',\n      title: 'Application Settings',\n      items: [\n        { label: 'General', isTitle: true },\n        {\n          label: 'Theme',\n          icon: 'palette',\n          children: [\n            { label: 'Light Mode', route: '/settings/theme/light' },\n            { label: 'Dark Mode', route: '/settings/theme/dark' },\n            { label: 'Auto', route: '/settings/theme/auto' }\n          ]\n        },\n        {\n          label: 'Language',\n          icon: 'language',\n          route: '/settings/language'\n        },\n        { label: 'Advanced', isTitle: true },\n        {\n          label: 'Developer Tools',\n          icon: 'code',\n          children: [\n            { label: 'API Console', route: '/settings/api-console' },\n            { label: 'Debug Mode', route: '/settings/debug' },\n            { label: 'Feature Flags', route: '/settings/features' }\n          ]\n        }\n      ]\n    };\n\n      this.sidenavService.push({ type: 'menu', items: settingsMenu});\n  }\n\n  showCustomWidget() {\n    // Example of pushing a custom component\n    const widgetComponent: ComponentStackItem = {\n      type: 'component',\n      component: CustomWidgetComponent,\n      componentData: {\n        title: 'System Status',\n        data: {\n          uptime: '99.9%',\n          activeUsers: 1234,\n          systemHealth: 'excellent'\n        }\n      }\n    };\n\n      this.sidenavService.push({ type: 'component', component: widgetComponent});\n  }\n\n  async goBack() {\n    await this.sidenavService.pop();\n  }\n\n  // Initialize with default menu\n  ngOnInit() {\n    this.showDashboard();\n  }\n}\n\n// Example custom component for the sidenav\n@Component({\n  selector: 'custom-widget',\n  template: `\n    \u003cdiv class=\"widget-container\"\u003e\n      \u003ch3\u003e{{ title() }}\u003c/h3\u003e\n      \n      \u003cdiv class=\"metrics\"\u003e\n        @for (metric of metrics(); track metric.label) {\n          \u003cdiv class=\"metric\"\u003e\n            \u003cspan class=\"label\"\u003e{{ metric.label }}\u003c/span\u003e\n            \u003cspan class=\"value\" [class]=\"metric.status\"\u003e{{ metric.value }}\u003c/span\u003e\n          \u003c/div\u003e\n        }\n      \u003c/div\u003e\n      \n      \u003cdiv class=\"actions\"\u003e\n        \u003cbutton (click)=\"refresh()\"\u003eRefresh\u003c/button\u003e\n        \u003cbutton (click)=\"exportData()\"\u003eExport\u003c/button\u003e\n      \u003c/div\u003e\n    \u003c/div\u003e\n  `,\n  styles: [`\n    .widget-container {\n      padding: 1.5rem;\n    }\n    \n    .metrics {\n      margin: 1rem 0;\n    }\n    \n    .metric {\n      display: flex;\n      justify-content: space-between;\n      padding: 0.5rem 0;\n      border-bottom: 1px solid #eee;\n    }\n    \n    .value.excellent { color: #4caf50; }\n    .value.good { color: #ff9800; }\n    .value.poor { color: #f44336; }\n    \n    .actions {\n      display: flex;\n      gap: 0.5rem;\n      margin-top: 1rem;\n    }\n    \n    .actions button {\n      padding: 0.5rem 1rem;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CustomWidgetComponent {\n  readonly title = input.required\u003cstring\u003e();\n  readonly data = input.required\u003cany\u003e();\n\n  protected readonly metrics = computed(() =\u003e [\n    { label: 'Uptime', value: this.data().uptime, status: 'excellent' },\n    { label: 'Active Users', value: this.data().activeUsers.toLocaleString(), status: 'good' },\n    { label: 'System Health', value: this.data().systemHealth, status: 'excellent' }\n  ]);\n\n  refresh() {\n    console.log('Refreshing widget data...');\n  }\n\n  exportData() {\n    console.log('Exporting data...');\n  }\n}\n```\n### Styling and Theming\nCustomize the appearance using CSS variables:\n\n## SIDENAV\n\n- `--ngx-sidenav-container-background-color`: Defines the background color of the sidenav container.\n- `--ngx-sidenav-link-item-parent-background-color`: Defines the background color of the parent link item in the sidenav.\n- `--ngx-sidenav-link-item-parent-text-color`: Defines the text color of the parent link item in the sidenav.\n- `--ngx-sidenav-link-item-text-color`: Defines the text color of the link item in the sidenav.\n- `--ngx-sidenav-link-item-border-left-color`: Defines the left border color of the link item in the sidenav.\n- `--ngx-sidenav-link-item-text-color-hover`: Defines the text color of the link item when hovered.\n- `--ngx-sidenav-link-item-text-color-active`: Defines the text color of the link item when active.\n- `--ngx-sidenav-link-item-border-left-color-hover`: Defines the left border color of the link item when hovered.\n- `--ngx-sidenav-link-item-border-left-color-active`: Defines the left border color of the link item when active.\n- `--ngx-sidenav-link-item-background-color-hover`: Defines the background color of the link item when hovered.\n- `--ngx-sidenav-link-item-background-color-active`: Defines the background color of the link item when active.\n- `--ngx-sidenav-link-item-box-shadow-color-hover`: Defines the box-shadow color of the link item when hovered.\n- `--ngx-sidenav-link-item-box-shadow-color-active`: Defines the box-shadow color of the link item when active.\n- `--ngx-sidenav-link-item-outline-color-hover`: Defines the outline color of the link item when hovered.\n- `--ngx-sidenav-link-item-outline-color-active`: Defines the outline color of the link item when active (commented out).\n\n## SIDENAV CONTENT SCROLLBAR\n\n- `--ngx-sidenav-content-background-color`: Defines the background color of the sidenav content area.\n- `--ngx-sidenav-content-background-color-hover`: Defines the background color of the sidenav content area when hovered.\n\n## SIDENAV TOGGLE\n\n- `--ngx-sidenav-toggle-border-color`: Defines the border color of the sidenav toggle.\n- `--ngx-sidenav-toggle-background-color`: Defines the background color of the sidenav toggle.\n- `--ngx-sidenav-toggle-background-color-hover`: Defines the background color of the sidenav toggle when hovered.\n- `--ngx-sidenav-toggle-border-color-hover`: Defines the border color of the sidenav toggle when hovered.\n- `--ngx-sidenav-toggle-outline-color`: Defines the outline color of the sidenav toggle.\n- `--ngx-sidenav-toggle-icon-color`: Defines the icon color of the sidenav toggle.\n\n## SIDENAV RESIZE HANDLE\n\n- `--ngx-sidenav-resize-handle-indicator-line-background-color`: Defines the background color of the resize handle indicator line.\n- `--ngx-sidenav-resize-handle-icon-indicator-line-border-color`: Defines the border color of the resize handle icon indicator line.\n- `--ngx-sidenav-resize-handle-icon-indicator-line-color`: Defines the color of the resize handle icon indicator line.\n- `--ngx-sidenav-resize-handle-icon-outline-color`: Defines the outline color of the resize handle icon.\n- `--ngx-sidenav-resize-handle-indicator-background-color`: Defines the background color of the resize handle indicator.\n- `--ngx-sidenav-resize-handle-indicator-background-color-hover`: Defines the background color of the resize handle indicator when hovered.\n- `--ngx-sidenav-resize-handle-icon-indicator-background-color`: Defines the background color of the resize handle icon indicator.\n- `--ngx-sidenav-resize-handle-icon-indicator-border-color`: Defines the border color of the resize handle icon indicator.\n- `--ngx-sidenav-resize-handle-icon-indicator-color`: Defines the color of the resize handle icon indicator.\n- `--ngx-sidenav-resize-handle-icon-indicator-background-color-hover`: Defines the background color of the resize handle icon indicator when hovered.\n- `--ngx-sidenav-resize-handle-icon-indicator-border-color-hover`: Defines the border color of the resize handle icon indicator when hovered.\n- `--ngx-sidenav-resize-handle-icon-indicator-color-hover`: Defines the color of the resize handle icon indicator when hovered.\n- `--ngx-sidenav-resize-handle-icon-indicator-line-background-color`: Defines the background color of the resize handle icon indicator line.\n\n## SIDENAV BADGES\n\n- `--badge-class`: Defines the background color for the \"class\" badge.\n- `--badge-constant`: Defines the background color for the \"constant\" badge.\n- `--badge-decorator`: Defines the background color for the \"decorator\" badge.\n- `--badge-directive`: Defines the background color for the \"directive\" badge.\n- `--badge-element`: Defines the background color for the \"element\" badge.\n- `--badge-enum`: Defines the background color for the \"enum\" badge.\n- `--badge-function`: Defines the background color for the \"function\" badge.\n- `--badge-interface`: Defines the background color for the \"interface\" badge.\n- `--badge-pipe`: Defines the background color for the \"pipe\" badge.\n- `--badge-impure-pipe`: Defines the background color for the \"impure pipe\" badge.\n- `--badge-module`: Defines the background color for the \"module\" badge.\n- `--badge-alias`: Defines the background color for the \"alias\" badge.\n- `--badge-block`: Defines the background color for the \"block\" badge.\n- `--badge-deprecated`: Defines the background color for the \"deprecated\" badge.\n- `--badge-custom`: Defines the background color for a custom badge.\n\n## 📚 API Reference\n\n### Components\n\n#### `\u003cngx-sidenav\u003e`\n\nThe main sidenav container component.\n\n**Properties:**\n- `minWidth: number` - Minimum width (default: 250)\n- `maxWidth: number` - Maximum width (default: 600)  \n- `initialWidth: number` - Initial width (default: 300)\n- `collapseWidth: number` - Width when collapsed (default: 30)\n- `canResize: boolean` - Enable resizing (default: true)\n- `canCollapse: boolean` - Enable collapsing (default: true)\n- `position: 'left' | 'right'` - Position (default: 'left')\n- `direction: 'ltr' | 'rtl'` - Text direction (default: 'ltr')\n- `backdrop: boolean` - Show backdrop (default: false)\n- `clearCacheOnReload: boolean` - Clear cache on reload (default: false)\n- `menuIconCollapse: string` - Collapse icon (default: 'menu_open')\n- `menuIconExpand: string` - Expand icon (default: 'menu')\n\n**Events:**\n- `opened()` - Sidenav opened\n- `closed()` - Sidenav closed  \n- `resized(width: number)` - Sidenav resized\n\n#### `\u003cngx-sidenav-menu\u003e`\n\nMenu component for displaying navigation items.\n\n**Properties:**\n- `items: StackMenuItem[]` - Menu items array\n- `parentLabel: string` - Parent menu label\n- `parentBadge: string` - Parent menu badge\n- `parentBadgeColor: string` - Parent badge color\n\n### Interfaces\n\n#### `StackMenuItem`\n\n```typescript\ninterface StackMenuItem {\n  label: string;\n  icon?: string;\n  iconType?: 'material' | 'svg' | 'custom';\n  route?: string;\n  children?: StackMenuItem[];\n  isParent?: boolean;\n  isTitle?: boolean;\n  tooltip?: string;\n  badge?: string | number;\n  badgeColor?: string;\n  disabled?: boolean;\n  summary?: string;\n  tags?: string[];\n  [key: string]: unknown; // Custom properties\n}\n```\n\n#### `MenuStackItem`\n\n```typescript\ninterface MenuStackItem {\n  type: 'menu';\n  title?: string;\n  badge?: string;\n  badgeColor?: string;\n  items: StackMenuItem[];\n}\n```\n\n#### `ComponentStackItem`\n\n```typescript\ninterface ComponentStackItem {\n  type: 'component';\n  component: Type\u003cany\u003e;\n  componentData?: Record\u003cstring, any\u003e;\n}\n```\n\n### SidenavService\n\nThe service for programmatic sidenav management.\n\n#### Methods\n\n- `push(item: MenuStackItem | ComponentStackItem): Promise\u003cvoid\u003e` - Add item to navigation stack\n- `pop(): Promise\u003cvoid\u003e` - Remove current item from stack\n- `toggleSidenav(): void` - Toggle sidenav open/closed state\n- `setSidenavWidth(width: number): void` - Set sidenav width\n- `setConfig(config: SidenavConfig): void` - Configure sidenav settings\n- `clearOnNextReload(): void` - Clear state on next page reload\n\n#### Signals\n\n- `isExpanded: Signal\u003cboolean\u003e` - Sidenav expanded state\n- `sidenavWidth: Signal\u003cnumber\u003e` - Current sidenav width\n- `currentMenu: Signal\u003cMenuStackItem | undefined\u003e` - Current menu\n- `canGoBack: Signal\u003cboolean\u003e` - Whether back navigation is available\n- `minWidth: Signal\u003cnumber\u003e` - Minimum width\n- `maxWidth: Signal\u003cnumber\u003e` - Maximum width\n\n## 🎯 Advanced Examples\n\n### Custom Component with Data Binding\n\n```typescript\n@Component({\n  selector: 'notification-center',\n  template: `\n    \u003cdiv class=\"notification-center\"\u003e\n      \u003cdiv class=\"header\"\u003e\n        \u003ch3\u003eNotifications\u003c/h3\u003e\n        \u003cbutton (click)=\"markAllRead()\"\u003eMark All Read\u003c/button\u003e\n      \u003c/div\u003e\n      \n      @for (notification of notifications(); track notification.id) {\n        \u003cdiv class=\"notification\" [class.unread]=\"!notification.read\"\u003e\n          \u003cdiv class=\"content\"\u003e\n            \u003ch4\u003e{{ notification.title }}\u003c/h4\u003e\n            \u003cp\u003e{{ notification.message }}\u003c/p\u003e\n            \u003csmall\u003e{{ notification.timestamp | date:'short' }}\u003c/small\u003e\n          \u003c/div\u003e\n          @if (!notification.read) {\n            \u003cbutton (click)=\"markAsRead(notification.id)\"\u003eMark Read\u003c/button\u003e\n          }\n        \u003c/div\u003e\n      }\n    \u003c/div\u003e\n  `,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class NotificationCenterComponent {\n  readonly notifications = input.required\u003cNotification[]\u003e();\n  \n  markAsRead(id: string) {\n    // Handle mark as read logic\n  }\n  \n  markAllRead() {\n    // Handle mark all as read logic\n  }\n}\n\n// Usage in parent component\nshowNotifications() {\n  const notificationComponent: ComponentStackItem = {\n    type: 'component',\n    component: NotificationCenterComponent,\n    componentData: {\n      notifications: this.notificationService.getNotifications()\n    }\n  };\n\n  this.sidenavService.push({ type: 'component', component: notificationComponent});\n}\n```\n\n### Multi-Level Navigation\n\n```typescript\nconst complexMenu: MenuStackItem = {\n  type: 'menu',\n  title: 'Project Management',\n  items: [\n    {\n      label: 'Projects',\n      icon: 'folder',\n      children: [\n        {\n          label: 'Active Projects',\n          children: [\n            { label: 'Web App Redesign', route: '/projects/web-redesign' },\n            { label: 'Mobile App', route: '/projects/mobile-app' },\n            { label: 'API Modernization', route: '/projects/api-modernization' }\n          ]\n        },\n        {\n          label: 'Archived Projects',\n          children: [\n            { label: 'Legacy System', route: '/projects/legacy' },\n            { label: 'Old Website', route: '/projects/old-website' }\n          ]\n        }\n      ]\n    },\n    {\n      label: 'Team',\n      icon: 'group',\n      children: [\n        { label: 'Developers', route: '/team/developers' },\n        { label: 'Designers', route: '/team/designers' },\n        { label: 'Project Managers', route: '/team/managers' }\n      ]\n    }\n  ]\n};\n```\n\n## 🎪 Demo Application\n\nExplore the full functionality in our interactive demo:\n\n**[🚀 Live Demo](https://fsegurai.github.io/ngx-sidenav)**\n\n### Run Demo Locally\n\n```bash\ngit clone https://github.com/fsegurai/ngx-sidenav.git\ncd ngx-sidenav\nbun install\nbun start\n```\n\nThe demo showcases:\n- All configuration options\n- Both HTML and service usage patterns\n- Custom component integration\n- Multi-level navigation\n- Responsive behavior\n- Theme customization\n\n## 🤝 Contributing\n\nContributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details on our code of conduct and the process for submitting pull requests.\n\n## 📄 License\n\nThis project is licensed under the MIT License—see the [LICENSE](LICENSE) file for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffsegurai%2Fngx-sidenav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffsegurai%2Fngx-sidenav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffsegurai%2Fngx-sidenav/lists"}