@elavarasanbititude/ng-cwr-sidebar 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+All notable changes to `ng-cwr-sidebar` will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+---
+
+## [1.0.0] - 2026-04-16
+
+### Added
+- `Sidebar` standalone Angular component (`<cwr-sidebar>`) with:
+  - Collapsible sidebar with configurable width
+  - Left/right positioning support
+  - Nested menu items with expand/collapse
+  - Badge support on menu items
+  - Configurable colors (background, text, hover)
+  - Mobile overlay mode
+  - Toggle button
+  - `menuItemClicked` and `collapsedChange` output events
+- `SidebarService` for programmatic control:
+  - `toggleCollapsed()`, `setCollapsed()`, `getCollapsed()`
+  - `setMenuItems()`, `getMenuItems()`, `addMenuItem()`, `removeMenuItem()`
+  - `setConfig()`, `getConfig()`
+  - Observable streams: `collapsed$`, `menuItems$`, `config$`
+- `SidebarMenuItem` and `SidebarConfig` TypeScript interfaces
+- Full SCSS theming with CSS custom properties

package/README.md

@@ -0,0 +1,348 @@
+# @yourname/ng-cwr-sidebar
+
+A modern, flexible, and fully customizable Angular sidebar component library built with Angular 21 and SCSS. Perfect for building responsive navigation sidebars with nested menus, icons, and badges.
+
+## Features
+
+- ✨ **Fully Customizable** - Configure colors, width, animations, and more
+- 📱 **Responsive Design** - Works seamlessly on desktop and mobile devices
+- 🎨 **Beautiful Styling** - Built with SCSS with light and dark theme support
+- 🔀 **Nested Menus** - Support for multi-level menu hierarchies
+- 🏷️ **Badges** - Add notification badges to menu items
+- 🎯 **Collapsible** - Smooth collapse/expand animations
+- ♿ **Accessible** - Built with accessibility best practices
+- 🚀 **TypeScript** - Fully typed with TypeScript interfaces
+- 🔄 **Reactive** - Built on RxJS Observables
+
+## Installation
+
+```bash
+npm install @yourname/ng-cwr-sidebar
+```
+
+## Quick Start
+
+### 1. Import the Component
+
+```typescript
+import { Sidebar } from '@yourname/ng-cwr-sidebar';
+
+@Component({
+  selector: 'app-root',
+  standalone: true,
+  imports: [Sidebar, CommonModule],
+  template: `
+    <cwr-sidebar 
+      [menuItems]="menuItems"
+      [config]="sidebarConfig"
+      (menuItemClicked)="onMenuItemClicked($event)"
+    ></cwr-sidebar>
+  `,
+})
+export class AppComponent {
+  menuItems = [
+    {
+      label: 'Dashboard',
+      icon: '📊',
+      route: '/dashboard',
+    },
+    {
+      label: 'Settings',
+      icon: '⚙️',
+      children: [
+        { label: 'Profile', route: '/settings/profile' },
+        { label: 'Preferences', route: '/settings/preferences' },
+      ],
+    },
+  ];
+
+  sidebarConfig = {
+    width: '250px',
+    collapsedWidth: '60px',
+  };
+
+  onMenuItemClicked(item: any) {
+    console.log('Menu item clicked:', item);
+  }
+}
+```
+
+### 2. Using the Sidebar Service
+
+```typescript
+import { SidebarService } from '@yourname/ng-cwr-sidebar';
+
+export class MyComponent {
+  constructor(private sidebarService: SidebarService) {}
+
+  toggleSidebar() {
+    this.sidebarService.toggleCollapsed();
+  }
+
+  addMenuItem() {
+    this.sidebarService.addMenuItem({
+      id: 'new-item',
+      label: 'New Menu Item',
+      icon: '✨',
+      route: '/new',
+    });
+  }
+}
+```
+
+## Configuration
+
+### SidebarConfig Interface
+
+```typescript
+interface SidebarConfig {
+  collapsed?: boolean;           // Initially collapsed state
+  position?: 'left' | 'right';   // Sidebar position
+  width?: string;                // Width when expanded (default: '250px')
+  collapsedWidth?: string;       // Width when collapsed (default: '60px')
+  backgroundColor?: string;      // Background color
+  textColor?: string;            // Text color
+  hoverColor?: string;           // Hover background color
+  toggleButton?: boolean;        // Show toggle button (default: true)
+  overlayOnMobile?: boolean;     // Show overlay on mobile (default: true)
+}
+```
+
+### SidebarMenuItem Interface
+
+```typescript
+interface SidebarMenuItem {
+  id?: string;                   // Unique identifier
+  label: string;                 // Display label
+  icon?: string;                 // Icon (emoji or HTML)
+  route?: string;                // Router link
+  action?: () => void;           // Click action function
+  children?: SidebarMenuItem[];  // Nested menu items
+  disabled?: boolean;            // Disable menu item
+  badge?: {
+    text: string;
+    color?: string;              // Badge background color
+  };
+}
+```
+
+## Examples
+
+### Basic Menu
+
+```typescript
+const menuItems: SidebarMenuItem[] = [
+  { label: 'Home', icon: '🏠', route: '/' },
+  { label: 'About', icon: 'ℹ️', route: '/about' },
+  { label: 'Contact', icon: '📧', route: '/contact' },
+];
+```
+
+### Menu with Nested Items
+
+```typescript
+const menuItems: SidebarMenuItem[] = [
+  {
+    label: 'Products',
+    icon: '📦',
+    children: [
+      { label: 'Electronics', route: '/products/electronics' },
+      { label: 'Clothing', route: '/products/clothing' },
+      { label: 'Books', route: '/products/books' },
+    ],
+  },
+];
+```
+
+### Menu with Badges
+
+```typescript
+const menuItems: SidebarMenuItem[] = [
+  {
+    label: 'Messages',
+    icon: '💬',
+    route: '/messages',
+    badge: {
+      text: '5 new',
+      color: '#ff6b6b',
+    },
+  },
+];
+```
+
+### Custom Actions
+
+```typescript
+const menuItems: SidebarMenuItem[] = [
+  {
+    label: 'Logout',
+    icon: '🚪',
+    action: () => {
+      // Custom logout logic
+      console.log('Logging out...');
+    },
+  },
+];
+```
+
+### Themed Configuration
+
+```typescript
+// Light theme
+const lightConfig: SidebarConfig = {
+  backgroundColor: '#f5f5f5',
+  textColor: '#333',
+  hoverColor: '#e0e0e0',
+};
+
+// Dark theme
+const darkConfig: SidebarConfig = {
+  backgroundColor: '#2c3e50',
+  textColor: '#ecf0f1',
+  hoverColor: '#34495e',
+};
+```
+
+## Component API
+
+### Input Properties
+
+- `@Input() menuItems: SidebarMenuItem[]` - Array of menu items to display
+- `@Input() config: SidebarConfig` - Configuration object for the sidebar
+
+### Output Events
+
+- `@Output() menuItemClicked: EventEmitter<SidebarMenuItem>` - Emits when a menu item is clicked
+- `@Output() collapsedChange: EventEmitter<boolean>` - Emits when sidebar collapsed state changes
+
+## Service API
+
+### SidebarService
+
+```typescript
+// Toggle collapsed state
+sidebarService.toggleCollapsed(): void
+
+// Set collapsed state
+sidebarService.setCollapsed(collapsed: boolean): void
+
+// Get collapsed state
+sidebarService.getCollapsed(): boolean
+
+// Get collapsed state as Observable
+sidebarService.collapsed$: Observable<boolean>
+
+// Set menu items
+sidebarService.setMenuItems(items: SidebarMenuItem[]): void
+
+// Get menu items
+sidebarService.getMenuItems(): SidebarMenuItem[]
+
+// Add a menu item
+sidebarService.addMenuItem(item: SidebarMenuItem): void
+
+// Remove a menu item by id
+sidebarService.removeMenuItem(id: string): void
+
+// Set configuration
+sidebarService.setConfig(config: SidebarConfig): void
+
+// Get configuration
+sidebarService.getConfig(): SidebarConfig
+```
+
+## Styling
+
+The component uses SCSS and includes both light and dark theme variants. You can customize the appearance by:
+
+1. **Inline Styles** - Use the `config` input property
+2. **CSS Classes** - Override default styles with your own CSS
+3. **Dark Theme** - Add the `dark-theme` class to enable dark mode
+
+### Custom Styling Example
+
+```scss
+// In your global styles
+.cwr-sidebar {
+  --primary-color: #your-color;
+  
+  .menu-link:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+}
+```
+
+## Responsive Behavior
+
+- **Desktop (>768px)**: Sidebar displays inline with toggle functionality
+- **Mobile (<768px)**: Sidebar displays as overlay, can be toggled in/out of view
+
+## Accessibility
+
+- Full keyboard navigation support
+- ARIA labels for screen readers
+- Focus management
+- Semantic HTML structure
+
+## Browser Support
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.
+
+## Support
+
+For issues, questions, or suggestions, please open an issue on the [GitHub repository](https://github.com/yourusername/ng-cwr-sidebar/issues).
+
+## Changelog
+
+### Version 1.0.0
+- Initial release
+- Full sidebar component with nested menus
+- Dark and light themes
+- Responsive design
+- Comprehensive service API
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/ng-cwr-sidebar
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish
+   ```
+
+## Running unit tests
+
+To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
+
+```bash
+ng test
+```
+
+## Running end-to-end tests
+
+For end-to-end (e2e) testing, run:
+
+```bash
+ng e2e
+```
+
+Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+
+## Additional Resources
+
+For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.

package/fesm2022/elavarasanbititude-ng-cwr-sidebar.mjs

@@ -0,0 +1,170 @@
+import * as i0 from '@angular/core';
+import { Injectable, EventEmitter, inject, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+
+class SidebarService {
+    collapsedSubject = new BehaviorSubject(false);
+    menuItemsSubject = new BehaviorSubject([]);
+    configSubject = new BehaviorSubject({});
+    collapsed$ = this.collapsedSubject.asObservable();
+    menuItems$ = this.menuItemsSubject.asObservable();
+    config$ = this.configSubject.asObservable();
+    constructor() { }
+    /**
+     * Toggle the sidebar collapsed state
+     */
+    toggleCollapsed() {
+        this.collapsedSubject.next(!this.collapsedSubject.value);
+    }
+    /**
+     * Set the collapsed state
+     */
+    setCollapsed(collapsed) {
+        this.collapsedSubject.next(collapsed);
+    }
+    /**
+     * Get current collapsed state
+     */
+    getCollapsed() {
+        return this.collapsedSubject.value;
+    }
+    /**
+     * Set menu items
+     */
+    setMenuItems(items) {
+        this.menuItemsSubject.next(items);
+    }
+    /**
+     * Get menu items
+     */
+    getMenuItems() {
+        return this.menuItemsSubject.value;
+    }
+    /**
+     * Add a menu item
+     */
+    addMenuItem(item) {
+        const items = this.menuItemsSubject.value;
+        this.menuItemsSubject.next([...items, item]);
+    }
+    /**
+     * Remove a menu item by id
+     */
+    removeMenuItem(id) {
+        const items = this.menuItemsSubject.value.filter(item => item.id !== id);
+        this.menuItemsSubject.next(items);
+    }
+    /**
+     * Update sidebar configuration
+     */
+    setConfig(config) {
+        this.configSubject.next(config);
+    }
+    /**
+     * Get sidebar configuration
+     */
+    getConfig() {
+        return this.configSubject.value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SidebarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class Sidebar {
+    menuItems = [];
+    config = {};
+    menuItemClicked = new EventEmitter();
+    collapsedChange = new EventEmitter();
+    sidebarService = inject(SidebarService);
+    get collapsed$() {
+        return this.sidebarService.collapsed$;
+    }
+    expandedItems = new Set();
+    defaultConfig = {
+        collapsed: false,
+        position: 'left',
+        width: '250px',
+        collapsedWidth: '60px',
+        backgroundColor: '#f5f5f5',
+        textColor: '#333',
+        hoverColor: '#e0e0e0',
+        toggleButton: true,
+        overlayOnMobile: true,
+    };
+    ngOnInit() {
+        this.sidebarService.setMenuItems(this.menuItems);
+        const mergedConfig = { ...this.defaultConfig, ...this.config };
+        this.sidebarService.setConfig(mergedConfig);
+    }
+    ngOnChanges() {
+        if (this.menuItems.length > 0) {
+            this.sidebarService.setMenuItems(this.menuItems);
+        }
+    }
+    toggleSidebar() {
+        this.sidebarService.toggleCollapsed();
+        this.collapsedChange.emit(this.sidebarService.getCollapsed());
+    }
+    toggleExpand(item) {
+        if (item.children && item.children.length > 0) {
+            const itemId = item.id || item.label;
+            if (this.expandedItems.has(itemId)) {
+                this.expandedItems.delete(itemId);
+            }
+            else {
+                this.expandedItems.add(itemId);
+            }
+        }
+    }
+    isExpanded(item) {
+        const itemId = item.id || item.label;
+        return this.expandedItems.has(itemId);
+    }
+    onMenuItemClick(item) {
+        if (item.action) {
+            item.action();
+        }
+        this.menuItemClicked.emit(item);
+    }
+    hasCildren(item) {
+        return !!(item.children && item.children.length > 0);
+    }
+    getConfig() {
+        return this.sidebarService.getConfig();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Sidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: Sidebar, isStandalone: true, selector: "cwr-sidebar", inputs: { menuItems: "menuItems", config: "config" }, outputs: { menuItemClicked: "menuItemClicked", collapsedChange: "collapsedChange" }, usesOnChanges: true, ngImport: i0, template: "<div \n  class=\"cwr-sidebar\"\n  [ngClass]=\"{ 'collapsed': (collapsed$ | async) }\"\n  [style.width]=\"(collapsed$ | async) ? getConfig().collapsedWidth : getConfig().width\"\n  [style.backgroundColor]=\"getConfig().backgroundColor\"\n  [style.color]=\"getConfig().textColor\"\n>\n  <!-- Toggle Button -->\n  <div class=\"sidebar-header\" *ngIf=\"getConfig().toggleButton\">\n    <button \n      class=\"toggle-btn\" \n      (click)=\"toggleSidebar()\"\n      [attr.aria-label]=\"(collapsed$ | async) ? 'Expand sidebar' : 'Collapse sidebar'\"\n    >\n      <span class=\"toggle-icon\">\u2630</span>\n    </button>\n    <span class=\"header-title\" *ngIf=\"!(collapsed$ | async)\">Menu</span>\n  </div>\n\n  <!-- Menu Items -->\n  <nav class=\"sidebar-nav\">\n    <ul class=\"menu-list\">\n      <li \n        *ngFor=\"let item of menuItems\"\n        class=\"menu-item\"\n        [ngClass]=\"{ \n          'has-children': hasCildren(item),\n          'expanded': isExpanded(item),\n          'disabled': item.disabled\n        }\"\n      >\n        <button \n          class=\"menu-link\"\n          [routerLink]=\"item.route\"\n          (click)=\"onMenuItemClick(item)\"\n          [disabled]=\"item.disabled\"\n        >\n          <span class=\"menu-icon\" *ngIf=\"item.icon\">{{ item.icon }}</span>\n          <span class=\"menu-label\" *ngIf=\"!(collapsed$ | async)\">\n            {{ item.label }}\n          </span>\n          <span \n            class=\"menu-badge\"\n            *ngIf=\"item.badge && !(collapsed$ | async)\"\n            [ngStyle]=\"{ 'background-color': item.badge.color || '#ff6b6b' }\"\n          >\n            {{ item.badge.text }}\n          </span>\n          <span \n            class=\"expand-icon\"\n            *ngIf=\"hasCildren(item)\"\n            (click)=\"toggleExpand(item)\"\n            [ngClass]=\"{ 'expanded': isExpanded(item) }\"\n          >\n            \u25BE\n          </span>\n        </button>\n\n        <!-- Nested Menu Items -->\n        <ul \n          class=\"submenu-list\"\n          *ngIf=\"hasCildren(item) && isExpanded(item)\"\n        >\n          <li \n            *ngFor=\"let child of item.children\"\n            class=\"submenu-item\"\n            [ngClass]=\"{ 'disabled': child.disabled }\"\n          >\n            <button \n              class=\"submenu-link\"\n              [routerLink]=\"child.route\"\n              (click)=\"onMenuItemClick(child)\"\n              [disabled]=\"child.disabled\"\n            >\n              <span class=\"submenu-icon\" *ngIf=\"child.icon\">{{ child.icon }}</span>\n              <span class=\"submenu-label\">{{ child.label }}</span>\n            </button>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </nav>\n</div>\n", styles: [".cwr-sidebar{display:flex;flex-direction:column;height:100vh;background-color:#f5f5f5;color:#333;border-right:1px solid #ddd;overflow:hidden;transition:width .3s ease-in-out;position:relative;z-index:1000}.cwr-sidebar.collapsed{width:60px}.cwr-sidebar .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #ddd;background-color:#00000005}.cwr-sidebar .sidebar-header .toggle-btn{background:transparent;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;color:#333;font-size:1.2rem;transition:background-color .3s,color .3s;border-radius:4px}.cwr-sidebar .sidebar-header .toggle-btn:hover{background-color:#e0e0e0;color:#007bff}.cwr-sidebar .sidebar-header .toggle-btn:active{transform:scale(.95)}.cwr-sidebar .sidebar-header .toggle-btn .toggle-icon{display:block}.cwr-sidebar .sidebar-header .header-title{flex:1;margin-left:.5rem;font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px}.cwr-sidebar .sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:.5rem 0}.cwr-sidebar .sidebar-nav::-webkit-scrollbar{width:6px}.cwr-sidebar .sidebar-nav::-webkit-scrollbar-track{background:transparent}.cwr-sidebar .sidebar-nav::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.cwr-sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover{background:#999}.cwr-sidebar .menu-list{list-style:none;padding:0;margin:0}.cwr-sidebar .menu-item{position:relative;transition:background-color .3s}.cwr-sidebar .menu-item.disabled{opacity:.5;cursor:not-allowed}.cwr-sidebar .menu-item:hover>.menu-link{background-color:#e0e0e0}.cwr-sidebar .menu-link{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1rem;background:transparent;border:none;color:inherit;cursor:pointer;font-size:.95rem;text-align:left;transition:background-color .3s,color .3s;position:relative}.cwr-sidebar .menu-link:hover:not(:disabled){color:#007bff}.cwr-sidebar .menu-link:disabled{cursor:not-allowed}.cwr-sidebar .menu-link:focus{outline:2px solid #007bff;outline-offset:-2px}.cwr-sidebar .menu-link .menu-icon{display:flex;align-items:center;justify-content:center;min-width:24px;font-size:1.1rem;margin-right:.75rem}.cwr-sidebar .menu-link .menu-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cwr-sidebar .menu-link .menu-badge{display:inline-block;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:600;color:#fff;margin:0 .5rem;white-space:nowrap}.cwr-sidebar .menu-link .expand-icon{display:flex;align-items:center;justify-content:center;margin-left:.5rem;font-size:.75rem;transition:transform .3s;cursor:pointer}.cwr-sidebar .menu-link .expand-icon.expanded{transform:rotate(180deg)}.cwr-sidebar .submenu-list{list-style:none;padding:0;margin:0;background-color:#0000000d;max-height:none;overflow:visible;animation:slideDown .3s ease-in-out}.cwr-sidebar .submenu-item{position:relative;transition:background-color .3s}.cwr-sidebar .submenu-item.disabled{opacity:.5;cursor:not-allowed}.cwr-sidebar .submenu-item:hover>.submenu-link{background-color:#00000014}.cwr-sidebar .submenu-link{display:flex;align-items:center;width:100%;padding:.6rem 1rem .6rem 3rem;background:transparent;border:none;color:inherit;cursor:pointer;font-size:.9rem;text-align:left;transition:background-color .3s,color .3s}.cwr-sidebar .submenu-link:hover:not(:disabled){color:#007bff;background-color:#00000014}.cwr-sidebar .submenu-link:disabled{cursor:not-allowed}.cwr-sidebar .submenu-link:focus{outline:2px solid #007bff;outline-offset:-2px}.cwr-sidebar .submenu-link .submenu-icon{display:flex;align-items:center;justify-content:center;min-width:20px;font-size:1rem;margin-right:.75rem}.cwr-sidebar .submenu-link .submenu-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.cwr-sidebar{position:absolute;left:0;top:0;bottom:0;box-shadow:0 2px 10px #0003}.cwr-sidebar.collapsed{transform:translate(-100%);width:250px}.cwr-sidebar .sidebar-nav{height:calc(100vh - 60px)}}.cwr-sidebar{--sidebar-color: #f5f5f5;--text-color: #333}.cwr-sidebar .menu-link,.cwr-sidebar .submenu-link{color:var(--text-color)}.cwr-sidebar .menu-link:hover:not(:disabled),.cwr-sidebar .submenu-link:hover:not(:disabled){background-color:#0000000d}.cwr-sidebar.dark-theme{background-color:#2c3e50;color:#ecf0f1;border-right-color:#34495e}.cwr-sidebar.dark-theme .sidebar-header{background-color:#ffffff0d;border-bottom-color:#34495e}.cwr-sidebar.dark-theme .menu-link:hover{background-color:#ffffff1a}.cwr-sidebar.dark-theme .menu-link:focus{outline-color:#3498db}.cwr-sidebar.dark-theme .submenu-list{background-color:#0000004d}.cwr-sidebar.dark-theme .submenu-item:hover>.submenu-link{background-color:#ffffff1a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: Sidebar, decorators: [{
+            type: Component,
+            args: [{ selector: 'cwr-sidebar', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div \n  class=\"cwr-sidebar\"\n  [ngClass]=\"{ 'collapsed': (collapsed$ | async) }\"\n  [style.width]=\"(collapsed$ | async) ? getConfig().collapsedWidth : getConfig().width\"\n  [style.backgroundColor]=\"getConfig().backgroundColor\"\n  [style.color]=\"getConfig().textColor\"\n>\n  <!-- Toggle Button -->\n  <div class=\"sidebar-header\" *ngIf=\"getConfig().toggleButton\">\n    <button \n      class=\"toggle-btn\" \n      (click)=\"toggleSidebar()\"\n      [attr.aria-label]=\"(collapsed$ | async) ? 'Expand sidebar' : 'Collapse sidebar'\"\n    >\n      <span class=\"toggle-icon\">\u2630</span>\n    </button>\n    <span class=\"header-title\" *ngIf=\"!(collapsed$ | async)\">Menu</span>\n  </div>\n\n  <!-- Menu Items -->\n  <nav class=\"sidebar-nav\">\n    <ul class=\"menu-list\">\n      <li \n        *ngFor=\"let item of menuItems\"\n        class=\"menu-item\"\n        [ngClass]=\"{ \n          'has-children': hasCildren(item),\n          'expanded': isExpanded(item),\n          'disabled': item.disabled\n        }\"\n      >\n        <button \n          class=\"menu-link\"\n          [routerLink]=\"item.route\"\n          (click)=\"onMenuItemClick(item)\"\n          [disabled]=\"item.disabled\"\n        >\n          <span class=\"menu-icon\" *ngIf=\"item.icon\">{{ item.icon }}</span>\n          <span class=\"menu-label\" *ngIf=\"!(collapsed$ | async)\">\n            {{ item.label }}\n          </span>\n          <span \n            class=\"menu-badge\"\n            *ngIf=\"item.badge && !(collapsed$ | async)\"\n            [ngStyle]=\"{ 'background-color': item.badge.color || '#ff6b6b' }\"\n          >\n            {{ item.badge.text }}\n          </span>\n          <span \n            class=\"expand-icon\"\n            *ngIf=\"hasCildren(item)\"\n            (click)=\"toggleExpand(item)\"\n            [ngClass]=\"{ 'expanded': isExpanded(item) }\"\n          >\n            \u25BE\n          </span>\n        </button>\n\n        <!-- Nested Menu Items -->\n        <ul \n          class=\"submenu-list\"\n          *ngIf=\"hasCildren(item) && isExpanded(item)\"\n        >\n          <li \n            *ngFor=\"let child of item.children\"\n            class=\"submenu-item\"\n            [ngClass]=\"{ 'disabled': child.disabled }\"\n          >\n            <button \n              class=\"submenu-link\"\n              [routerLink]=\"child.route\"\n              (click)=\"onMenuItemClick(child)\"\n              [disabled]=\"child.disabled\"\n            >\n              <span class=\"submenu-icon\" *ngIf=\"child.icon\">{{ child.icon }}</span>\n              <span class=\"submenu-label\">{{ child.label }}</span>\n            </button>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </nav>\n</div>\n", styles: [".cwr-sidebar{display:flex;flex-direction:column;height:100vh;background-color:#f5f5f5;color:#333;border-right:1px solid #ddd;overflow:hidden;transition:width .3s ease-in-out;position:relative;z-index:1000}.cwr-sidebar.collapsed{width:60px}.cwr-sidebar .sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1rem;border-bottom:1px solid #ddd;background-color:#00000005}.cwr-sidebar .sidebar-header .toggle-btn{background:transparent;border:none;cursor:pointer;padding:.5rem;display:flex;align-items:center;justify-content:center;color:#333;font-size:1.2rem;transition:background-color .3s,color .3s;border-radius:4px}.cwr-sidebar .sidebar-header .toggle-btn:hover{background-color:#e0e0e0;color:#007bff}.cwr-sidebar .sidebar-header .toggle-btn:active{transform:scale(.95)}.cwr-sidebar .sidebar-header .toggle-btn .toggle-icon{display:block}.cwr-sidebar .sidebar-header .header-title{flex:1;margin-left:.5rem;font-weight:600;font-size:.95rem;text-transform:uppercase;letter-spacing:.5px}.cwr-sidebar .sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:.5rem 0}.cwr-sidebar .sidebar-nav::-webkit-scrollbar{width:6px}.cwr-sidebar .sidebar-nav::-webkit-scrollbar-track{background:transparent}.cwr-sidebar .sidebar-nav::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}.cwr-sidebar .sidebar-nav::-webkit-scrollbar-thumb:hover{background:#999}.cwr-sidebar .menu-list{list-style:none;padding:0;margin:0}.cwr-sidebar .menu-item{position:relative;transition:background-color .3s}.cwr-sidebar .menu-item.disabled{opacity:.5;cursor:not-allowed}.cwr-sidebar .menu-item:hover>.menu-link{background-color:#e0e0e0}.cwr-sidebar .menu-link{display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem 1rem;background:transparent;border:none;color:inherit;cursor:pointer;font-size:.95rem;text-align:left;transition:background-color .3s,color .3s;position:relative}.cwr-sidebar .menu-link:hover:not(:disabled){color:#007bff}.cwr-sidebar .menu-link:disabled{cursor:not-allowed}.cwr-sidebar .menu-link:focus{outline:2px solid #007bff;outline-offset:-2px}.cwr-sidebar .menu-link .menu-icon{display:flex;align-items:center;justify-content:center;min-width:24px;font-size:1.1rem;margin-right:.75rem}.cwr-sidebar .menu-link .menu-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cwr-sidebar .menu-link .menu-badge{display:inline-block;padding:.25rem .5rem;border-radius:12px;font-size:.75rem;font-weight:600;color:#fff;margin:0 .5rem;white-space:nowrap}.cwr-sidebar .menu-link .expand-icon{display:flex;align-items:center;justify-content:center;margin-left:.5rem;font-size:.75rem;transition:transform .3s;cursor:pointer}.cwr-sidebar .menu-link .expand-icon.expanded{transform:rotate(180deg)}.cwr-sidebar .submenu-list{list-style:none;padding:0;margin:0;background-color:#0000000d;max-height:none;overflow:visible;animation:slideDown .3s ease-in-out}.cwr-sidebar .submenu-item{position:relative;transition:background-color .3s}.cwr-sidebar .submenu-item.disabled{opacity:.5;cursor:not-allowed}.cwr-sidebar .submenu-item:hover>.submenu-link{background-color:#00000014}.cwr-sidebar .submenu-link{display:flex;align-items:center;width:100%;padding:.6rem 1rem .6rem 3rem;background:transparent;border:none;color:inherit;cursor:pointer;font-size:.9rem;text-align:left;transition:background-color .3s,color .3s}.cwr-sidebar .submenu-link:hover:not(:disabled){color:#007bff;background-color:#00000014}.cwr-sidebar .submenu-link:disabled{cursor:not-allowed}.cwr-sidebar .submenu-link:focus{outline:2px solid #007bff;outline-offset:-2px}.cwr-sidebar .submenu-link .submenu-icon{display:flex;align-items:center;justify-content:center;min-width:20px;font-size:1rem;margin-right:.75rem}.cwr-sidebar .submenu-link .submenu-label{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.cwr-sidebar{position:absolute;left:0;top:0;bottom:0;box-shadow:0 2px 10px #0003}.cwr-sidebar.collapsed{transform:translate(-100%);width:250px}.cwr-sidebar .sidebar-nav{height:calc(100vh - 60px)}}.cwr-sidebar{--sidebar-color: #f5f5f5;--text-color: #333}.cwr-sidebar .menu-link,.cwr-sidebar .submenu-link{color:var(--text-color)}.cwr-sidebar .menu-link:hover:not(:disabled),.cwr-sidebar .submenu-link:hover:not(:disabled){background-color:#0000000d}.cwr-sidebar.dark-theme{background-color:#2c3e50;color:#ecf0f1;border-right-color:#34495e}.cwr-sidebar.dark-theme .sidebar-header{background-color:#ffffff0d;border-bottom-color:#34495e}.cwr-sidebar.dark-theme .menu-link:hover{background-color:#ffffff1a}.cwr-sidebar.dark-theme .menu-link:focus{outline-color:#3498db}.cwr-sidebar.dark-theme .submenu-list{background-color:#0000004d}.cwr-sidebar.dark-theme .submenu-item:hover>.submenu-link{background-color:#ffffff1a}\n"] }]
+        }], propDecorators: { menuItems: [{
+                type: Input
+            }], config: [{
+                type: Input
+            }], menuItemClicked: [{
+                type: Output
+            }], collapsedChange: [{
+                type: Output
+            }] } });
+
+/*
+ * Public API Surface of ng-cwr-sidebar
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { Sidebar, SidebarService };
+//# sourceMappingURL=elavarasanbititude-ng-cwr-sidebar.mjs.map

package/fesm2022/elavarasanbititude-ng-cwr-sidebar.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"elavarasanbititude-ng-cwr-sidebar.mjs","sources":["../../../packages/ng-cwr-sidebar/src/lib/services/sidebar.service.ts","../../../packages/ng-cwr-sidebar/src/lib/sidebar/sidebar.ts","../../../packages/ng-cwr-sidebar/src/lib/sidebar/sidebar.html","../../../packages/ng-cwr-sidebar/src/public-api.ts","../../../packages/ng-cwr-sidebar/src/elavarasanbititude-ng-cwr-sidebar.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\nimport { SidebarConfig, SidebarMenuItem } from '../models/sidebar.model';\n\n@Injectable({\n  providedIn: 'root',\n})\nexport class SidebarService {\n  private collapsedSubject = new BehaviorSubject<boolean>(false);\n  private menuItemsSubject = new BehaviorSubject<SidebarMenuItem[]>([]);\n  private configSubject = new BehaviorSubject<SidebarConfig>({});\n\n  public collapsed$ = this.collapsedSubject.asObservable();\n  public menuItems$ = this.menuItemsSubject.asObservable();\n  public config$ = this.configSubject.asObservable();\n\n  constructor() {}\n\n  /**\n   * Toggle the sidebar collapsed state\n   */\n  toggleCollapsed(): void {\n    this.collapsedSubject.next(!this.collapsedSubject.value);\n  }\n\n  /**\n   * Set the collapsed state\n   */\n  setCollapsed(collapsed: boolean): void {\n    this.collapsedSubject.next(collapsed);\n  }\n\n  /**\n   * Get current collapsed state\n   */\n  getCollapsed(): boolean {\n    return this.collapsedSubject.value;\n  }\n\n  /**\n   * Set menu items\n   */\n  setMenuItems(items: SidebarMenuItem[]): void {\n    this.menuItemsSubject.next(items);\n  }\n\n  /**\n   * Get menu items\n   */\n  getMenuItems(): SidebarMenuItem[] {\n    return this.menuItemsSubject.value;\n  }\n\n  /**\n   * Add a menu item\n   */\n  addMenuItem(item: SidebarMenuItem): void {\n    const items = this.menuItemsSubject.value;\n    this.menuItemsSubject.next([...items, item]);\n  }\n\n  /**\n   * Remove a menu item by id\n   */\n  removeMenuItem(id: string): void {\n    const items = this.menuItemsSubject.value.filter(item => item.id !== id);\n    this.menuItemsSubject.next(items);\n  }\n\n  /**\n   * Update sidebar configuration\n   */\n  setConfig(config: SidebarConfig): void {\n    this.configSubject.next(config);\n  }\n\n  /**\n   * Get sidebar configuration\n   */\n  getConfig(): SidebarConfig {\n    return this.configSubject.value;\n  }\n}\n","import { Component, OnInit, Input, Output, EventEmitter, ChangeDetectionStrategy, inject } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { RouterModule } from '@angular/router';\nimport { SidebarService } from '../services/sidebar.service';\nimport { SidebarConfig, SidebarMenuItem } from '../models/sidebar.model';\n\n@Component({\n  selector: 'cwr-sidebar',\n  standalone: true,\n  imports: [CommonModule, RouterModule],\n  templateUrl: './sidebar.html',\n  styleUrl: './sidebar.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class Sidebar implements OnInit {\n  @Input() menuItems: SidebarMenuItem[] = [];\n  @Input() config: SidebarConfig = {};\n  @Output() menuItemClicked = new EventEmitter<SidebarMenuItem>();\n  @Output() collapsedChange = new EventEmitter<boolean>();\n\n  private sidebarService = inject(SidebarService);\n\n  get collapsed$() {\n    return this.sidebarService.collapsed$;\n  }\n\n  expandedItems: Set<string> = new Set();\n\n  readonly defaultConfig: SidebarConfig = {\n    collapsed: false,\n    position: 'left',\n    width: '250px',\n    collapsedWidth: '60px',\n    backgroundColor: '#f5f5f5',\n    textColor: '#333',\n    hoverColor: '#e0e0e0',\n    toggleButton: true,\n    overlayOnMobile: true,\n  };\n\n  ngOnInit(): void {\n    this.sidebarService.setMenuItems(this.menuItems);\n    const mergedConfig = { ...this.defaultConfig, ...this.config };\n    this.sidebarService.setConfig(mergedConfig);\n  }\n\n  ngOnChanges(): void {\n    if (this.menuItems.length > 0) {\n      this.sidebarService.setMenuItems(this.menuItems);\n    }\n  }\n\n  toggleSidebar(): void {\n    this.sidebarService.toggleCollapsed();\n    this.collapsedChange.emit(this.sidebarService.getCollapsed());\n  }\n\n  toggleExpand(item: SidebarMenuItem): void {\n    if (item.children && item.children.length > 0) {\n      const itemId = item.id || item.label;\n      if (this.expandedItems.has(itemId)) {\n        this.expandedItems.delete(itemId);\n      } else {\n        this.expandedItems.add(itemId);\n      }\n    }\n  }\n\n  isExpanded(item: SidebarMenuItem): boolean {\n    const itemId = item.id || item.label;\n    return this.expandedItems.has(itemId);\n  }\n\n  onMenuItemClick(item: SidebarMenuItem): void {\n    if (item.action) {\n      item.action();\n    }\n    this.menuItemClicked.emit(item);\n  }\n\n  hasCildren(item: SidebarMenuItem): boolean {\n    return !!(item.children && item.children.length > 0);\n  }\n\n  getConfig(): SidebarConfig {\n    return this.sidebarService.getConfig();\n  }\n}\n","<div \n  class=\"cwr-sidebar\"\n  [ngClass]=\"{ 'collapsed': (collapsed$ | async) }\"\n  [style.width]=\"(collapsed$ | async) ? getConfig().collapsedWidth : getConfig().width\"\n  [style.backgroundColor]=\"getConfig().backgroundColor\"\n  [style.color]=\"getConfig().textColor\"\n>\n  <!-- Toggle Button -->\n  <div class=\"sidebar-header\" *ngIf=\"getConfig().toggleButton\">\n    <button \n      class=\"toggle-btn\" \n      (click)=\"toggleSidebar()\"\n      [attr.aria-label]=\"(collapsed$ | async) ? 'Expand sidebar' : 'Collapse sidebar'\"\n    >\n      <span class=\"toggle-icon\">☰</span>\n    </button>\n    <span class=\"header-title\" *ngIf=\"!(collapsed$ | async)\">Menu</span>\n  </div>\n\n  <!-- Menu Items -->\n  <nav class=\"sidebar-nav\">\n    <ul class=\"menu-list\">\n      <li \n        *ngFor=\"let item of menuItems\"\n        class=\"menu-item\"\n        [ngClass]=\"{ \n          'has-children': hasCildren(item),\n          'expanded': isExpanded(item),\n          'disabled': item.disabled\n        }\"\n      >\n        <button \n          class=\"menu-link\"\n          [routerLink]=\"item.route\"\n          (click)=\"onMenuItemClick(item)\"\n          [disabled]=\"item.disabled\"\n        >\n          <span class=\"menu-icon\" *ngIf=\"item.icon\">{{ item.icon }}</span>\n          <span class=\"menu-label\" *ngIf=\"!(collapsed$ | async)\">\n            {{ item.label }}\n          </span>\n          <span \n            class=\"menu-badge\"\n            *ngIf=\"item.badge && !(collapsed$ | async)\"\n            [ngStyle]=\"{ 'background-color': item.badge.color || '#ff6b6b' }\"\n          >\n            {{ item.badge.text }}\n          </span>\n          <span \n            class=\"expand-icon\"\n            *ngIf=\"hasCildren(item)\"\n            (click)=\"toggleExpand(item)\"\n            [ngClass]=\"{ 'expanded': isExpanded(item) }\"\n          >\n            ▾\n          </span>\n        </button>\n\n        <!-- Nested Menu Items -->\n        <ul \n          class=\"submenu-list\"\n          *ngIf=\"hasCildren(item) && isExpanded(item)\"\n        >\n          <li \n            *ngFor=\"let child of item.children\"\n            class=\"submenu-item\"\n            [ngClass]=\"{ 'disabled': child.disabled }\"\n          >\n            <button \n              class=\"submenu-link\"\n              [routerLink]=\"child.route\"\n              (click)=\"onMenuItemClick(child)\"\n              [disabled]=\"child.disabled\"\n            >\n              <span class=\"submenu-icon\" *ngIf=\"child.icon\">{{ child.icon }}</span>\n              <span class=\"submenu-label\">{{ child.label }}</span>\n            </button>\n          </li>\n        </ul>\n      </li>\n    </ul>\n  </nav>\n</div>\n","/*\n * Public API Surface of ng-cwr-sidebar\n */\n\nexport * from './lib/sidebar/sidebar';\nexport * from './lib/services/sidebar.service';\nexport * from './lib/models/sidebar.model';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@elavarasanbititude/ng-cwr-sidebar",
+  "version": "1.0.0",
+  "description": "A modern, flexible, and customizable Angular sidebar component library",
+  "author": "elavarasanbititude",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/ng-cwr-sidebar"
+  },
+  "bugs": {
+    "url": "https://github.com/yourusername/ng-cwr-sidebar/issues"
+  },
+  "homepage": "https://github.com/yourusername/ng-cwr-sidebar#readme",
+  "keywords": [
+    "angular",
+    "sidebar",
+    "navigation",
+    "menu",
+    "component",
+    "responsive",
+    "scss"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/router": "^21.2.0",
+    "rxjs": "~7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/elavarasanbititude-ng-cwr-sidebar.mjs",
+  "typings": "types/elavarasanbititude-ng-cwr-sidebar.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/elavarasanbititude-ng-cwr-sidebar.d.ts",
+      "default": "./fesm2022/elavarasanbititude-ng-cwr-sidebar.mjs"
+    }
+  },
+  "type": "module"
+}

package/types/elavarasanbititude-ng-cwr-sidebar.d.ts

@@ -0,0 +1,107 @@
+import * as rxjs from 'rxjs';
+import { Observable } from 'rxjs';
+import * as i0 from '@angular/core';
+import { OnInit, EventEmitter } from '@angular/core';
+
+/**
+ * Represents a menu item in the sidebar
+ */
+interface SidebarMenuItem {
+    id?: string;
+    label: string;
+    icon?: string;
+    route?: string;
+    action?: () => void;
+    children?: SidebarMenuItem[];
+    disabled?: boolean;
+    badge?: {
+        text: string;
+        color?: string;
+    };
+}
+/**
+ * Configuration for the sidebar component
+ */
+interface SidebarConfig {
+    collapsed?: boolean;
+    position?: 'left' | 'right';
+    width?: string;
+    collapsedWidth?: string;
+    backgroundColor?: string;
+    textColor?: string;
+    hoverColor?: string;
+    toggleButton?: boolean;
+    overlayOnMobile?: boolean;
+}
+
+declare class Sidebar implements OnInit {
+    menuItems: SidebarMenuItem[];
+    config: SidebarConfig;
+    menuItemClicked: EventEmitter<SidebarMenuItem>;
+    collapsedChange: EventEmitter<boolean>;
+    private sidebarService;
+    get collapsed$(): rxjs.Observable<boolean>;
+    expandedItems: Set<string>;
+    readonly defaultConfig: SidebarConfig;
+    ngOnInit(): void;
+    ngOnChanges(): void;
+    toggleSidebar(): void;
+    toggleExpand(item: SidebarMenuItem): void;
+    isExpanded(item: SidebarMenuItem): boolean;
+    onMenuItemClick(item: SidebarMenuItem): void;
+    hasCildren(item: SidebarMenuItem): boolean;
+    getConfig(): SidebarConfig;
+    static ɵfac: i0.ɵɵFactoryDeclaration<Sidebar, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<Sidebar, "cwr-sidebar", never, { "menuItems": { "alias": "menuItems"; "required": false; }; "config": { "alias": "config"; "required": false; }; }, { "menuItemClicked": "menuItemClicked"; "collapsedChange": "collapsedChange"; }, never, never, true, never>;
+}
+
+declare class SidebarService {
+    private collapsedSubject;
+    private menuItemsSubject;
+    private configSubject;
+    collapsed$: Observable<boolean>;
+    menuItems$: Observable<SidebarMenuItem[]>;
+    config$: Observable<SidebarConfig>;
+    constructor();
+    /**
+     * Toggle the sidebar collapsed state
+     */
+    toggleCollapsed(): void;
+    /**
+     * Set the collapsed state
+     */
+    setCollapsed(collapsed: boolean): void;
+    /**
+     * Get current collapsed state
+     */
+    getCollapsed(): boolean;
+    /**
+     * Set menu items
+     */
+    setMenuItems(items: SidebarMenuItem[]): void;
+    /**
+     * Get menu items
+     */
+    getMenuItems(): SidebarMenuItem[];
+    /**
+     * Add a menu item
+     */
+    addMenuItem(item: SidebarMenuItem): void;
+    /**
+     * Remove a menu item by id
+     */
+    removeMenuItem(id: string): void;
+    /**
+     * Update sidebar configuration
+     */
+    setConfig(config: SidebarConfig): void;
+    /**
+     * Get sidebar configuration
+     */
+    getConfig(): SidebarConfig;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SidebarService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<SidebarService>;
+}
+
+export { Sidebar, SidebarService };
+export type { SidebarConfig, SidebarMenuItem };