{"_id":"@angulogic/ng-sidebar","_rev":"8-8ac43eed2c928ea798bae92c9d406666","name":"@angulogic/ng-sidebar","dist-tags":{"latest":"2.0.3"},"versions":{"0.0.1":{"name":"@angulogic/ng-sidebar","version":"0.0.1","_id":"@angulogic/ng-sidebar@0.0.1","maintainers":[{"name":"serkankarahan","email":"karahanserkannn@gmail.com"}],"dist":{"shasum":"b4e2ea4511c1181e8cac6382e39738f4f722d161","tarball":"https://registry.npmjs.org/@angulogic/ng-sidebar/-/ng-sidebar-0.0.1.tgz","fileCount":15,"integrity":"sha512-+nO66bPy2PTmzghKRNi9s3mKHpXuqXveCsA8/vsNiRvJDsOp1+/IiNv7+2rVc84RzK1wJIcNKcb5tbPrHN6nbw==","signatures":[{"sig":"MEYCIQC5ZYMOiRMYh8QSQBe/JuMVG+bUCWNpUXIJuvqnRJSktwIhAKLAnpuu/CafwnRlR8aQvU+FTeVrxMe+K567rRpqixRx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":15023},"module":"fesm2022/angulogic-ng-sidebar.mjs","exports":{".":{"esm":"./esm2022/angulogic-ng-sidebar.mjs","types":"./index.d.ts","default":"./fesm2022/angulogic-ng-sidebar.mjs","esm2022":"./esm2022/angulogic-ng-sidebar.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"2d2b3699645e8a8af490bf454279ef1a264a5055","typings":"index.d.ts","_npmUser":{"name":"serkankarahan","email":"karahanserkannn@gmail.com"},"_npmVersion":"10.7.0","description":"This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 18.2.0.","directories":{},"sideEffects":false,"_nodeVersion":"20.15.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^18.2.0","@angular/common":"^18.2.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-sidebar_0.0.1_1735331323201_0.06761290248892315","host":"s3://npm-registry-packages-npm-production"}},"1.0.0":{"name":"@angulogic/ng-sidebar","version":"1.0.0","license":"MIT","_id":"@angulogic/ng-sidebar@1.0.0","maintainers":[{"name":"serkankarahan","email":"karahanserkannn@gmail.com"}],"homepage":"https://github.com/skarahan35/angulogic#readme","bugs":{"url":"https://github.com/skarahan35/angulogic/issues"},"dist":{"shasum":"74c0e0364b7839b778cffe30e443af01ecfeb61e","tarball":"https://registry.npmjs.org/@angulogic/ng-sidebar/-/ng-sidebar-1.0.0.tgz","fileCount":38,"integrity":"sha512-0DQxParNX1R3Awjkqyo2BUj9O/1jhqzOHqa9JPg9czafoisP3a/lR1N8SS4Oq3Cgcmzv0EiZk07iP/tRCEJigg==","signatures":[{"sig":"MEUCIQDNfVgXXbJ0s6pVYCpi0TZv5xpLUp4Uf0VXjXhq68J5HQIgAzuOQqieJDCNmsO8uApRymL6xrPmRjA9GlSSeeyiKPQ=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":599988},"module":"fesm2022/angulogic-ng-sidebar.mjs","exports":{".":{"esm":"./esm2022/angulogic-ng-sidebar.mjs","types":"./index.d.ts","default":"./fesm2022/angulogic-ng-sidebar.mjs","esm2022":"./esm2022/angulogic-ng-sidebar.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"eb19b9c8b79bb9a2db848e2739357b9785673153","typings":"index.d.ts","_npmUser":{"name":"serkankarahan","email":"karahanserkannn@gmail.com"},"repository":{"url":"git+https://github.com/skarahan35/angulogic.git","type":"git"},"_npmVersion":"10.7.0","description":"angular sidebar","directories":{},"sideEffects":false,"_nodeVersion":"20.15.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=15.0.0","@angular/common":">=15.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-sidebar_1.0.0_1738689966455_0.4235107137859535","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@angulogic/ng-sidebar","version":"1.0.1","keywords":["angular","sidebar","navigation","responsive","sidenav","menu","angular-sidebar","angulogic"],"license":"MIT","_id":"@angulogic/ng-sidebar@1.0.1","maintainers":[{"name":"serkankarahan","email":"karahanserkannn@gmail.com"},{"name":"ergulferik","email":"eng.ergulferik@gmail.com"}],"homepage":"https://github.com/skarahan35/angulogic#readme","bugs":{"url":"https://github.com/skarahan35/angulogic/issues"},"dist":{"shasum":"49b04a2c1fc1087e4c44e35e0fd7f88349777afd","tarball":"https://registry.npmjs.org/@angulogic/ng-sidebar/-/ng-sidebar-1.0.1.tgz","fileCount":38,"integrity":"sha512-9JqzCWXJd5/Uu5xtVMRwDDikTRo1sguH52ZU/rQA2qsmLAKUUwHLIYESly463jJAtJSbn3f3/cXymKIXkS6taA==","signatures":[{"sig":"MEQCIHpmJypTVZ6O38ccWMlw9qh2sR033Ggm7/9Ka2FhgzgiAiAIHJ+3sNnPiHcqW3FUrBCbJmlNGTWyw2AV51Nqrmyg9Q==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":600334},"module":"fesm2022/angulogic-ng-sidebar.mjs","exports":{".":{"esm":"./esm2022/angulogic-ng-sidebar.mjs","types":"./index.d.ts","default":"./fesm2022/angulogic-ng-sidebar.mjs","esm2022":"./esm2022/angulogic-ng-sidebar.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"eb19b9c8b79bb9a2db848e2739357b9785673153","typings":"index.d.ts","_npmUser":{"name":"serkankarahan","email":"karahanserkannn@gmail.com"},"repository":{"url":"git+https://github.com/skarahan35/angulogic.git","type":"git"},"_npmVersion":"10.7.0","description":"angular sidebar","directories":{},"sideEffects":false,"_nodeVersion":"20.15.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=15.0.0","@angular/common":">=15.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-sidebar_1.0.1_1738690827877_0.24901186480602688","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@angulogic/ng-sidebar","version":"2.0.0","license":"MIT","_id":"@angulogic/ng-sidebar@2.0.0","maintainers":[{"name":"serkankarahan","email":"karahanserkannn@gmail.com"},{"name":"ergulferik","email":"eng.ergulferik@gmail.com"}],"homepage":"https://github.com/skarahan35/angulogic#readme","bugs":{"url":"https://github.com/skarahan35/angulogic/issues"},"dist":{"shasum":"fb7c06ae05804266db01fb212f4f4b67b52568b2","tarball":"https://registry.npmjs.org/@angulogic/ng-sidebar/-/ng-sidebar-2.0.0.tgz","fileCount":36,"integrity":"sha512-YUfTJvufZUQJr/chyaoQ1hyd0GajJY7BvAdsI9kMoLjLUKbnmok5i81crMKdUsyBcv0v90rJpGz1VV9AR0TgVA==","signatures":[{"sig":"MEYCIQD0hmnUUGvTEeyn7g8OagZmUIQwCJyMXk3odf4RnIpjIgIhAPJ/0Iju5VskTnbSsHGdaaqm1Sjva0F8qg6YR00nz0Ow","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":600897},"module":"fesm2022/angulogic-ng-sidebar.mjs","exports":{".":{"esm":"./esm2022/angulogic-ng-sidebar.mjs","types":"./index.d.ts","default":"./fesm2022/angulogic-ng-sidebar.mjs","esm2022":"./esm2022/angulogic-ng-sidebar.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"47c3337925f496f5eba8dda1ccb68ea32bfb6d2e","typings":"index.d.ts","_npmUser":{"name":"ergulferik","actor":{"name":"ergulferik","type":"user","email":"eng.ergulferik@gmail.com"},"email":"eng.ergulferik@gmail.com"},"repository":{"url":"git+https://github.com/skarahan35/angulogic.git","type":"git"},"_npmVersion":"11.4.1","description":"angular sidebar - standalone components","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":"^17.0.0","@angular/common":"^17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-sidebar_2.0.0_1751023218261_0.9815580101338619","host":"s3://npm-registry-packages-npm-production"}},"2.0.1":{"name":"@angulogic/ng-sidebar","version":"2.0.1","license":"MIT","_id":"@angulogic/ng-sidebar@2.0.1","maintainers":[{"name":"serkankarahan","email":"karahanserkannn@gmail.com"},{"name":"ergulferik","email":"eng.ergulferik@gmail.com"}],"homepage":"https://github.com/skarahan35/angulogic#readme","bugs":{"url":"https://github.com/skarahan35/angulogic/issues"},"dist":{"shasum":"3f4e78f4ffc78b136b0432aa7e841e831d3ee56a","tarball":"https://registry.npmjs.org/@angulogic/ng-sidebar/-/ng-sidebar-2.0.1.tgz","fileCount":36,"integrity":"sha512-pe+55kxrCcXdMN0nXEozwR6zrgQtDNeZfldfMlZ6YfVqTPej1sEOxfYmK/OvHTH/vzuyDyZY5Ui/7yBJ7QlueA==","signatures":[{"sig":"MEUCIHkfUfO+VF+ncB4xgClxIPUDn1qGNFrY9SZiiok8hM5WAiEAz5a0RybsVKjI1cYu516xNF/nctuPYzexSr6rLDPzzLU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":600899},"module":"fesm2022/angulogic-ng-sidebar.mjs","exports":{".":{"esm":"./esm2022/angulogic-ng-sidebar.mjs","types":"./index.d.ts","default":"./fesm2022/angulogic-ng-sidebar.mjs","esm2022":"./esm2022/angulogic-ng-sidebar.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"47c3337925f496f5eba8dda1ccb68ea32bfb6d2e","typings":"index.d.ts","_npmUser":{"name":"ergulferik","actor":{"name":"ergulferik","type":"user","email":"eng.ergulferik@gmail.com"},"email":"eng.ergulferik@gmail.com"},"repository":{"url":"git+https://github.com/skarahan35/angulogic.git","type":"git"},"_npmVersion":"11.4.1","description":"angular sidebar - standalone components","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=17.0.0","@angular/common":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-sidebar_2.0.1_1751023419837_0.7489741759638862","host":"s3://npm-registry-packages-npm-production"}},"2.0.2":{"name":"@angulogic/ng-sidebar","version":"2.0.2","license":"MIT","_id":"@angulogic/ng-sidebar@2.0.2","maintainers":[{"name":"serkankarahan","email":"karahanserkannn@gmail.com"},{"name":"ergulferik","email":"eng.ergulferik@gmail.com"}],"homepage":"https://github.com/skarahan35/angulogic#readme","bugs":{"url":"https://github.com/skarahan35/angulogic/issues"},"dist":{"shasum":"8bbd940e09e297901251147e2f1a7ccedc870723","tarball":"https://registry.npmjs.org/@angulogic/ng-sidebar/-/ng-sidebar-2.0.2.tgz","fileCount":36,"integrity":"sha512-6nge7q5t2cIzh19GuODiPsDb/beZmAVnunjy7ZuXNZ9Nl9bpmt99SwpmP30r6jcXhSIrctGo9MJNa6oenMrRhQ==","signatures":[{"sig":"MEUCIBiikX0qJXvPfol/0jkPVFj1R3HlV/8M7eqzXQEcwsDrAiEAmlPLnmq+v77u6UtiScRpxug3/d5+9x8idsW/Q8CiRt8=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":611204},"module":"fesm2022/angulogic-ng-sidebar.mjs","exports":{".":{"esm":"./esm2022/angulogic-ng-sidebar.mjs","types":"./index.d.ts","default":"./fesm2022/angulogic-ng-sidebar.mjs","esm2022":"./esm2022/angulogic-ng-sidebar.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"8a171b25bd18ce96b10ccfd39af34af11288b64d","typings":"index.d.ts","_npmUser":{"name":"ergulferik","email":"eng.ergulferik@gmail.com"},"repository":{"url":"git+https://github.com/skarahan35/angulogic.git","type":"git"},"_npmVersion":"11.4.1","description":"angular sidebar - standalone components","directories":{},"sideEffects":false,"_nodeVersion":"22.17.0","dependencies":{"tslib":"^2.3.0"},"_hasShrinkwrap":false,"peerDependencies":{"@angular/core":">=17.0.0","@angular/common":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/ng-sidebar_2.0.2_1767903877198_0.4010847709122769","host":"s3://npm-registry-packages-npm-production"}},"2.0.3":{"name":"@angulogic/ng-sidebar","version":"2.0.3","peerDependencies":{"@angular/common":">=17.0.0","@angular/core":">=17.0.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"description":"angular sidebar - standalone components","repository":{"type":"git","url":"git+https://github.com/skarahan35/angulogic.git"},"bugs":{"url":"https://github.com/skarahan35/angulogic/issues"},"homepage":"https://github.com/skarahan35/angulogic#readme","license":"MIT","module":"fesm2022/angulogic-ng-sidebar.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","esm2022":"./esm2022/angulogic-ng-sidebar.mjs","esm":"./esm2022/angulogic-ng-sidebar.mjs","default":"./fesm2022/angulogic-ng-sidebar.mjs"}},"_id":"@angulogic/ng-sidebar@2.0.3","gitHead":"8a171b25bd18ce96b10ccfd39af34af11288b64d","_nodeVersion":"22.17.0","_npmVersion":"11.4.1","dist":{"integrity":"sha512-bniag104WHqJotZbMdOk0CJhEZjvHfyk0DiDk2jjmMlBJ471ByqHQjDPmXlTjPqBY9Gw8+PnwzTZjCU9uJWeTw==","shasum":"c7b67b51169550026932ddcf80a52d8505ae2d23","tarball":"https://registry.npmjs.org/@angulogic/ng-sidebar/-/ng-sidebar-2.0.3.tgz","fileCount":36,"unpackedSize":613783,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC3Lgt7tjVZ7XUnIuCO1CDsu45f3gEzPDfxzaj70hzHHAIgQEQns15FNaUiW0h/YwPxF+SuX00wtnMKNoPDBQXCjpk="}]},"_npmUser":{"name":"ergulferik","email":"eng.ergulferik@gmail.com"},"directories":{},"maintainers":[{"name":"serkankarahan","email":"karahanserkannn@gmail.com"},{"name":"ergulferik","email":"eng.ergulferik@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ng-sidebar_2.0.3_1767904336532_0.9137336773154716"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-27T20:28:43.096Z","modified":"2026-01-08T20:32:16.936Z","0.0.1":"2024-12-27T20:28:43.405Z","1.0.0":"2025-02-04T17:26:06.715Z","1.0.1":"2025-02-04T17:40:28.103Z","2.0.0":"2025-06-27T11:20:18.467Z","2.0.1":"2025-06-27T11:23:40.070Z","2.0.2":"2026-01-08T20:24:37.339Z","2.0.3":"2026-01-08T20:32:16.706Z"},"bugs":{"url":"https://github.com/skarahan35/angulogic/issues"},"license":"MIT","homepage":"https://github.com/skarahan35/angulogic#readme","repository":{"type":"git","url":"git+https://github.com/skarahan35/angulogic.git"},"description":"angular sidebar - standalone components","maintainers":[{"name":"serkankarahan","email":"karahanserkannn@gmail.com"},{"name":"ergulferik","email":"eng.ergulferik@gmail.com"}],"readme":"# @angulogic/ng-sidebar\r\n\r\n[![npm version](https://img.shields.io/npm/v/@angulogic/ng-sidebar.svg)](https://www.npmjs.com/package/@angulogic/ng-sidebar) \r\n[![License](https://img.shields.io/github/license/skarahan35/angulogic.svg)](https://github.com/skarahan35/angulogic/blob/dev/LICENSE)\r\n\r\n@angulogic/ng-sidebar is a dynamic, interactive, and highly configurable Angular sidebar component designed to provide a rich navigation experience in your Angular applications. It supports nested menus, search functionality, favorites management, theme toggling, responsive view modes, and resizable/auto-position capabilities.\r\n\r\n**🚀 Version 2.0.0 - Now with Standalone Components Support!**\r\n\r\nThis package has been updated to use Angular's standalone components architecture, making it compatible with modern Angular applications (v17+) that use the standalone approach.\r\n\r\n---\r\n\r\n![Light Theme](assets/images/light.png) ![Dark Theme](assets/images/dark.png)\r\n\r\n---\r\n\r\n## Table of Contents\r\n\r\n- [Features](#features)\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n - [Standalone Components Usage](#standalone-components-usage)\r\n - [Basic Usage](#basic-usage)\r\n - [Advanced Configuration](#advanced-configuration)\r\n - [CSS Customization](#css-customization)\r\n- [API Documentation](#api-documentation)\r\n - [Models](#models)\r\n - [Events](#events)\r\n - [Methods](#methods)\r\n- [Development](#development)\r\n- [Contributing](#contributing)\r\n- [License](#license)\r\n- [Maintainers](#maintainers)\r\n\r\n---\r\n\r\n## Features\r\n\r\n- **Dynamic Menu Navigation:** \r\n Create multiple sidebar sections with nested menu items and submenus.\r\n\r\n- **Search & Favorites:** \r\n Integrated search functionality with configurable matching strategies (`contains`, `startsWith`, `endsWith`, `equal`) and a favorites management system.\r\n\r\n- **Custom Banner & User Profile:** \r\n Display a customizable banner (logo and title) and user profile section with click callbacks.\r\n\r\n- **Responsive & Flexible:** \r\n Supports various view modes such as `toggle`, `hover`, `mobile`, and `fix`. Auto-positioning adapts the layout dynamically.\r\n\r\n- **Resizable Sidebar:** \r\n End users can resize the sidebar while respecting minimum and maximum width constraints.\r\n\r\n- **Theme Switching:** \r\n Built-in light/dark theme support along with an optional theme picker.\r\n\r\n- **Extensible Callbacks:** \r\n Provides hooks for events like menu item clicks, toggles, search start/end, resizing events, and theme changes.\r\n\r\n- **Standalone Components:** \r\n Built with Angular's standalone components architecture for modern Angular applications.\r\n\r\n---\r\n\r\n## Installation\r\n\r\nInstall @angulogic/ng-sidebar via npm:\r\n\r\n```bash\r\nnpm install @angulogic/ng-sidebar\r\n```\r\n\r\n---\r\n\r\n## Usage\r\n\r\n### Standalone Components Usage\r\n\r\nThis package now uses Angular's standalone components architecture. You can import and use the components directly in your standalone components:\r\n\r\n```typescript\r\nimport { NgSidebarComponent } from '@angulogic/ng-sidebar';\r\nimport { SidebarModel } from '@angulogic/ng-sidebar';\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n standalone: true,\r\n imports: [NgSidebarComponent]\r\n})\r\nexport class AppComponent {\r\n sidebarModel: SidebarModel = {\r\n bannerOptions: {\r\n title: 'My App',\r\n logo: 'assets/logo.png',\r\n },\r\n userOptions: {\r\n name: 'John Doe',\r\n avatar: 'assets/avatar.png',\r\n },\r\n sidebarData: [\r\n {\r\n title: 'Main Menu',\r\n data: [\r\n { name: 'Dashboard', route: '/dashboard' },\r\n { name: 'Settings', route: '/settings' },\r\n ],\r\n },\r\n ],\r\n options: {\r\n expand: true,\r\n theme: 'light',\r\n },\r\n };\r\n}\r\n```\r\n\r\n```html\r\n\r\n```\r\n\r\n### Basic Usage\r\n\r\nFor traditional NgModule-based applications, you can still use the components by importing them in your module:\r\n\r\n```typescript\r\nimport { NgSidebarComponent } from '@angulogic/ng-sidebar';\r\nimport { SidebarModel } from '@angulogic/ng-sidebar';\r\n\r\n@NgModule({\r\n imports: [NgSidebarComponent],\r\n})\r\nexport class AppModule {}\r\n\r\n@Component({\r\n selector: 'app-root',\r\n templateUrl: './app.component.html',\r\n})\r\nexport class AppComponent {\r\n sidebarModel: SidebarModel = {\r\n bannerOptions: {\r\n title: 'My App',\r\n logo: 'assets/logo.png',\r\n },\r\n userOptions: {\r\n name: 'John Doe',\r\n avatar: 'assets/avatar.png',\r\n },\r\n sidebarData: [\r\n {\r\n title: 'Main Menu',\r\n data: [\r\n { name: 'Dashboard', route: '/dashboard' },\r\n { name: 'Settings', route: '/settings' },\r\n ],\r\n },\r\n ],\r\n options: {\r\n expand: true,\r\n theme: 'light',\r\n },\r\n };\r\n}\r\n```\r\n\r\n```html\r\n\r\n```\r\n\r\n### Advanced Configuration\r\n\r\nYou can customize the sidebar with content projection using directives like:\r\n\r\n```html\r\n\r\n
Custom Banner Content
\r\n
Custom User Content
\r\n
Custom Menu Content
\r\n\r\n```\r\n\r\n### Using Individual Components\r\n\r\nYou can also use individual components separately:\r\n\r\n```typescript\r\nimport { ThemeTogglerComponent } from '@angulogic/ng-sidebar';\r\nimport { TogglerDirective } from '@angulogic/ng-sidebar';\r\nimport { AlIconComponent } from '@angulogic/ng-sidebar';\r\n\r\n@Component({\r\n selector: 'app-custom',\r\n templateUrl: './custom.component.html',\r\n standalone: true,\r\n imports: [ThemeTogglerComponent, TogglerDirective, AlIconComponent]\r\n})\r\nexport class CustomComponent {\r\n // Your component logic\r\n}\r\n```\r\n\r\n```html\r\n\r\n\r\n\r\n```\r\n\r\n### CSS Customization\r\n\r\nYou can customize the appearance of the sidebar by overriding CSS variables:\r\n\r\n```css\r\nng-sidebar {\r\n --primary: red !important;\r\n --bg-color: #f0f0f0 !important;\r\n}\r\n```\r\n\r\n#### Available CSS Variables\r\n| **Variable** | **Description** | **Default Value** |\r\n|---------------------------------------------|----------------------------------------------------|-------------------------|\r\n| `--radius` | Border radius for UI elements | `6px` |\r\n| `--collapse-width` | Width when the sidebar is collapsed | `100px` |\r\n| `--sidebar-width` | Default width of the sidebar | `250px` |\r\n| `--bg-color` | Background color of the sidebar | `white` |\r\n| `--text-color` | Default text color | `#000000de` |\r\n| `--primary` | Primary color used for highlights | `#1b84ff` |\r\n| `--primary-2` | Secondary shade of primary color | `#4394f1` |\r\n| `--primary-3` | Tertiary shade of primary color | `#5c9be4` |\r\n| `--secondary` | Secondary color | `#d6d6d6` |\r\n| `--secondary-2` | Lighter shade of secondary color | `#e9e9e9` |\r\n| `--secondary-3` | Lightest shade of secondary color | `#f3f3f3` |\r\n| `--default-font-family` | Default font family | `'Inter', sans-serif` |\r\n| `--collapsed-banner-padding-right` | Padding right for the collapsed banner | `1rem` |\r\n| `--resizer-color` | Color of the resizer | `#1b84ff` |\r\n| `--resizer-width` | Width of the resizer | `5px` |\r\n| `--resizer-height` | Height of the resizer | `100%` |\r\n| `--resizer-right` | Positioning from the right | `-3px` |\r\n| `--resiver-top` | Positioning from the top | `0` |\r\n| `--toggle-border-radius` | Border radius of toggle button | `6px` |\r\n| `--toggle-border-color` | Border color of toggle button | `#d6d6d6` |\r\n| `--toggle-bg-color` | Background color of toggle button | `white` |\r\n| `--toggle-border-width` | Border width of toggle button | `1px` |\r\n| `--search-width` | Width of the search bar | `100%` |\r\n| `--search-icon-left` | Left position for search icon | `0.75rem` |\r\n| `--search-icon-top` | Top position for search icon | `50%` |\r\n| `--search-input-border-radius` | Border radius of the search input | `6px` |\r\n| `--search-input-border-color` | Border color of the search input | `#d6d6d6` |\r\n| `--search-input-border-width` | Border width of the search input | `1px` |\r\n| `--search-input-bg-color` | Background color of the search input | `#f6f8fa` |\r\n| `--search-input-color` | Text color of the search input | `#333333` |\r\n| `--search-input-width` | Width of the search input | `100%` |\r\n| `--search-input-height` | Height of the search input | `2rem` |\r\n| `--search-input-padding` | Padding for the search input | `0px 1.5rem` |\r\n| `--search-input-margin` | Margin for the search input | `0px 0.5rem` |\r\n| `--search-cancel-icon-right` | Right position for search cancel icon | `0.75rem` |\r\n| `--search-cancel-icon-top` | Top position for search cancel icon | `50%` |\r\n| `--menu-padding` | Padding for the menu | `0px 1rem` |\r\n| `--menu-margin` | Margin for the menu | `1rem 0px` |\r\n| `--menu-height` | Height of the menu | `100%` |\r\n| `--menu-wrapper-margin-bottom` | Bottom margin for the menu wrapper | `1rem` |\r\n| `--menu-wrapper-collapsed-margin-bottom` | Bottom margin when the menu is collapsed | `0px` |\r\n| `--menu-wrapper-collapsed-color` | Text color for collapsed menu | `#d6d6d6` |\r\n| `--menu-wrapper-title-font-size` | Font size for menu section titles | `20px` |\r\n| `--menu-wrapper-title-padding-bottom` | Bottom padding for menu section titles | `0.5rem` |\r\n| `--user-name-font-weight` | Font weight for the user name | `bold` |\r\n| `--user-name-font-size` | Font size for the user name | `large` |\r\n| `--scrollbar-height` | Height of the scrollbar | `0.4rem` |\r\n| `--scrollbar-width` | Width of the scrollbar | `0.4rem` |\r\n| `--banner-height` | Height of the banner | `10%` |\r\n| `--banner-padding` | Padding for the banner | `1rem` |\r\n| `--banner-logo-height` | Height of the banner logo | `5rem` |\r\n| `--banner-title-font-size` | Font size of the banner title | `xx-large` |\r\n---\r\n\r\n## API Documentation\r\n\r\n## Models\r\n\r\n| **Model** | **Property** | **Type** | **Description** | **Default** |\r\n|-----------------|--------------------------|-------------------------------|-----------------------------------------------------|---------------|\r\n| `SidebarModel` | `bannerOptions` | `Banner` | Configuration for sidebar banner | `undefined` |\r\n| | `userOptions` | `User` | User profile section configuration | `undefined` |\r\n| | `sidebarData` | `SidebarData[]` | Array of sidebar sections and menus | `[]` |\r\n| | `options` | `SidebarOptions` | General sidebar settings | `undefined` |\r\n| | `searchOptions` | `Search` | Configuration for search functionality | `undefined` |\r\n| | `favorites` | `MenuData[]` | List of favorite menu items | `[]` |\r\n| | `theme` | `'light' , 'dark'` | Current sidebar theme | `'light'` |\r\n| | `viewMode` | `'toggle' , 'hover'` | Sidebar display mode | `'toggle'` |\r\n| `Banner` | `logo` | `string` | Sidebar logo URL | `undefined` |\r\n| | `title` | `string` | Sidebar banner title | `undefined` |\r\n| | `onClick` | `(element) => void` | Callback when banner elements are clicked | `undefined` |\r\n| `User` | `avatar` | `string` | User avatar URL | `undefined` |\r\n| | `name` | `string` | Display name for the user | `undefined` |\r\n| | `position` | `'top' , 'bottom'` | Position of the user profile | `'bottom'` |\r\n| | `onClick` | `(element) => void` | Callback when user elements are clicked | `undefined` |\r\n| `SidebarData` | `title` | `string` | Title of the sidebar section | `undefined` |\r\n| | `cssClass` | `string` | Custom CSS class | `undefined` |\r\n| | `visible` | `boolean` | Visibility of the section | `true` |\r\n| | `data` | `MenuData[]` | Array of menu items | `[]` |\r\n| `MenuData` | `name` | `string` | Name of the menu item | `undefined` |\r\n| | `icon` | `string` | Icon URL for the menu item | `undefined` |\r\n| | `route` | `string` | Navigation route | `undefined` |\r\n| | `visible` | `boolean` | Visibility of the menu item | `true` |\r\n| | `isExpanded` | `boolean` | Expansion state for submenus | `false` |\r\n| | `isFavorited` | `boolean` | Favorite status of the menu item | `false` |\r\n| | `children` | `MenuData[]` | Nested submenu items | `[]` |\r\n| | `onClick` | `(event) => void` | Callback for menu item click | `undefined` |\r\n| `SidebarOptions`| `resize` | `boolean` | Enables resizing of the sidebar | `true` |\r\n| | `expand` | `boolean` | Enables sidebar expansion | `true` |\r\n| | `theme` | `'light' , 'dark'` | Sidebar theme | `'light'` |\r\n| | `autoPosition` | `boolean` | Enables automatic positioning | `true` |\r\n| | `minWidth` | `number` | Minimum width of the sidebar | `300` |\r\n| | `maxWidth` | `number` | Maximum width of the sidebar | `500` |\r\n| `Search` | `placeholder` | `string` | Placeholder text for the search bar | `undefined` |\r\n| | `caseSensitive` | `boolean` | Enables case sensitivity in searches | `false` |\r\n| | `strategy` | `'contains' , 'startsWith', 'endsWith' , 'equal'` | Defines search strategy | `'contains'` |\r\n| | `onSearchStart` | `(event) => void` | Callback for search start event | `undefined` |\r\n| | `onSearchEnd` | `(event) => void` | Callback for search end event | `undefined` |\r\n\r\nFor more details on the available models, refer to the source code documentation.\r\n\r\n---\r\n\r\n### Methods\r\n\r\n| **Method** | **Description** | **Parameters** |\r\n|---------------------|----------------------------------------------|---------------------------------|\r\n| `changeTheme()` | Switches between light and dark themes | None |\r\n\r\n---\r\n\r\n## Development\r\n\r\n### Run Locally\r\n\r\n```bash\r\ngit clone https://github.com/skarahan35/angulogic.git\r\nnpm install\r\nnpm run start\r\n```\r\n\r\n### Build for Production\r\n\r\n```bash\r\ncd projects/ng-sidebar\r\nnpm run build\r\n```\r\n\r\n---\r\n\r\n## Contributing\r\n\r\nWe welcome contributions to @angulogic/ng-sidebar!\r\n\r\n1. Fork the repository.\r\n2. Create a new branch: `git checkout -b feature/your-feature-name`\r\n3. Make your changes and commit: `git commit -m 'Add new feature'`\r\n4. Push to your branch: `git push origin feature/your-feature-name`\r\n5. Open a pull request.\r\n\r\n---\r\n\r\n## License\r\n\r\n@angulogic/ng-sidebar is licensed under the [MIT License](LICENSE).\r\n\r\n---\r\n\r\n## Maintainers\r\n\r\n- [Serkan Karahan](https://github.com/skarahan35) \r\n- [Ergül Ferik](https://github.com/ergulferik)\r\n\r\nEnjoy building with **@angulogic/ng-sidebar**! 🚀\r\n\r\n","readmeFilename":"README.md"}