{"_rev":"5-dc30a7029f258272b80bd692f7c0818b","time":{"created":"2026-02-14T22:21:27.667Z","modified":"2026-02-14T22:21:28.222Z","0.0.1":"2025-05-24T07:13:17.042Z","0.0.1-alpha.1":"2025-05-24T13:29:54.672Z","0.0.6":"2026-02-14T22:21:27.957Z"},"_id":"@dawit-io/spartan-sidebar-core","name":"@dawit-io/spartan-sidebar-core","dist-tags":{"latest":"0.0.6"},"versions":{"0.0.6":{"name":"@dawit-io/spartan-sidebar-core","version":"0.0.6","description":"Angular sidebar component library - brain implementation","keywords":["angular","sidebar","component","ui"],"author":{"name":"Dawit","email":"dawit@gojodigital.com"},"license":"MIT","homepage":"https://spartan-dashboard.gojodigital.com/showcase","repository":{"type":"git","url":"git+https://github.com/dawit-io/spartan-dashboard.git"},"bugs":{"url":"https://github.com/dawit-io/spartan-dashboard/issues"},"peerDependencies":{"@angular/common":"^19.2.0","@angular/core":"^19.2.0"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"publishConfig":{"access":"public"},"module":"fesm2022/dawit-io-spartan-sidebar-core.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/dawit-io-spartan-sidebar-core.mjs"}},"_id":"@dawit-io/spartan-sidebar-core@0.0.6","gitHead":"71b45006d67131875377c86a7552d217fac0aa58","_nodeVersion":"22.13.0","_npmVersion":"11.0.0","dist":{"integrity":"sha512-6bpx4LKQBIswsWSACfOlIbZFEtBhYkG8QRiWX7/BTAkP2Q1a9Z5wHc0Rqkgg1NLjd9TU/H+M1XT/+zY+m5UORQ==","shasum":"63860fd9682e2418d2565f7a0882a9f3dc488fd8","tarball":"https://registry.npmjs.org/@dawit-io/spartan-sidebar-core/-/spartan-sidebar-core-0.0.6.tgz","fileCount":14,"unpackedSize":54222,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCfCWzC2DvRDZLjjC11znFFucsQkPcHeVl8Mfqp2wWG5gIhAJDZVgNO2C8D3mCMu2oU3PG0M+aGmdEhua0ix81uRL6+"}]},"_npmUser":{"name":"dawit-io","email":"dawit@gojodigital.com"},"directories":{},"maintainers":[{"name":"dawit-io","email":"dawit@gojodigital.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/spartan-sidebar-core_0.0.6_1771107687817_0.04389516806544491"},"_hasShrinkwrap":false}},"maintainers":[{"name":"dawit-io","email":"dawit@gojodigital.com"}],"description":"Angular sidebar component library - brain implementation","homepage":"https://spartan-dashboard.gojodigital.com/showcase","keywords":["angular","sidebar","component","ui"],"repository":{"type":"git","url":"git+https://github.com/dawit-io/spartan-dashboard.git"},"author":{"name":"Dawit","email":"dawit@gojodigital.com"},"bugs":{"url":"https://github.com/dawit-io/spartan-dashboard/issues"},"license":"MIT","readme":"# @dawit-io/spartan-sidebar-core\r\n\r\nHeadless, unstyled Angular sidebar primitives with signal-based state management. Part of the [Spartan Dashboard](https://github.com/dawit-io/spartan-dashboard) project.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @dawit-io/spartan-sidebar-core\r\n```\r\n\r\n## Quick Start\r\n\r\n```typescript\r\nimport { BrnSidebarComponent, BrnSidebarTriggerDirective } from '@dawit-io/spartan-sidebar-core';\r\n\r\n@Component({\r\n  selector: 'app-layout',\r\n  standalone: true,\r\n  imports: [BrnSidebarComponent, BrnSidebarTriggerDirective],\r\n  template: `\r\n    <div class=\"flex\">\r\n      <brn-sidebar [variant]=\"'sidebar'\" [collapsibleMode]=\"'icon'\">\r\n        <!-- sidebar content -->\r\n      </brn-sidebar>\r\n      <div>\r\n        <button brnSidebarTrigger>Toggle</button>\r\n        <!-- main content -->\r\n      </div>\r\n    </div>\r\n  `,\r\n})\r\nexport class LayoutComponent {}\r\n```\r\n\r\n## Components & Directives\r\n\r\n| Export | Selector | Description |\r\n|--------|----------|-------------|\r\n| `BrnSidebarComponent` | `brn-sidebar` | Root sidebar container. Provides `BrnSidebarService` to children. |\r\n| `BrnSidebarTriggerDirective` | `[brnSidebarTrigger]` | Toggle directive. Apply to any button to expand/collapse the sidebar. |\r\n| `BrnSidebarGroupDirective` | `[brnSidebarGroup]` | Collapsible group container with `toggleExpansion()` method. |\r\n| `BrnSidebarGroupLabelDirective` | `[brnSidebarGroupLabel]` | Label for a group. Auto-generates ID for ARIA `aria-labelledby`. |\r\n| `BrnSidebarNavDirective` | `[brnSidebarNav]` | Navigation container with `role=\"navigation\"`. |\r\n| `BrnSidebarNavItemDirective` | `[brnSidebarNavItem]` | Navigation item. Inputs: `icon`, `isActive`. Sets `aria-current=\"page\"` when active. |\r\n| `BrnSidebarFooterComponent` | `brn-sidebar-footer` | Footer slot at the bottom of the sidebar. |\r\n\r\n## BrnSidebarComponent Inputs\r\n\r\n| Input | Type | Default | Description |\r\n|-------|------|---------|-------------|\r\n| `isCollapsible` | `boolean` | `true` | Whether the sidebar can be collapsed |\r\n| `isOverlay` | `boolean` | `false` | Whether the sidebar overlays the content |\r\n| `variant` | `SidebarVariant` | `'sidebar'` | Layout variant |\r\n| `collapsibleMode` | `CollapsibleMode` | `'icon'` | Collapse behavior |\r\n\r\n## BrnSidebarService\r\n\r\nInjected automatically by `BrnSidebarComponent`. Access it in child components via `inject(BrnSidebarService)`.\r\n\r\n### Signals (read-only)\r\n\r\n| Signal | Type | Description |\r\n|--------|------|-------------|\r\n| `id` | `string` | Auto-generated sidebar ID |\r\n| `isExpanded` | `boolean` | Current expansion state |\r\n| `isCollapsible` | `boolean` | Whether sidebar can collapse |\r\n| `isMobile` | `boolean` | `true` when viewport <= 768px |\r\n| `isOverlay` | `boolean` | Whether overlay mode is active |\r\n| `variant` | `SidebarVariant` | Current variant |\r\n| `collapsibleMode` | `CollapsibleMode` | Current collapsible mode |\r\n\r\n### Methods\r\n\r\n| Method | Description |\r\n|--------|-------------|\r\n| `toggle()` | Toggle expanded/collapsed state (no-op if `isCollapsible` is false) |\r\n| `setVariant(variant)` | Change the layout variant |\r\n| `setCollapsibleMode(mode)` | Change the collapsible mode |\r\n| `setMobileState(isMobile)` | Set mobile state (auto-switches to offcanvas + overlay on mobile) |\r\n| `setOverlayMode(isOverlay)` | Set overlay mode |\r\n| `setCollapsible(isCollapsible)` | Set whether sidebar is collapsible |\r\n\r\n## Types\r\n\r\n```typescript\r\ntype SidebarVariant = 'sidebar' | 'floating' | 'inset';\r\ntype CollapsibleMode = 'offcanvas' | 'icon' | 'none';\r\n```\r\n\r\n### Variants\r\n\r\n- **`sidebar`** -- Standard fixed sidebar, sticky to the left\r\n- **`floating`** -- Absolute positioned with shadow, overlays content\r\n- **`inset`** -- Bordered card-style sidebar with margins\r\n\r\n### Collapsible Modes\r\n\r\n- **`icon`** -- Collapses to a narrow icon-only bar\r\n- **`offcanvas`** -- Slides in/out from the left with transform animation\r\n- **`none`** -- Always visible, no collapse behavior\r\n\r\n### Mobile Behavior\r\n\r\nThe service auto-detects viewports <= 768px and switches to `offcanvas` mode with overlay enabled. The sidebar is closed by default on mobile.\r\n\r\n## Import Options\r\n\r\n**Standalone (recommended):**\r\n\r\n```typescript\r\nimport { BrnSidebarComponent, BrnSidebarTriggerDirective } from '@dawit-io/spartan-sidebar-core';\r\n\r\n@Component({\r\n  imports: [BrnSidebarComponent, BrnSidebarTriggerDirective],\r\n})\r\n```\r\n\r\n**Convenience array:**\r\n\r\n```typescript\r\nimport { BrnSidebarImports } from '@dawit-io/spartan-sidebar-core';\r\n\r\n@Component({\r\n  imports: [...BrnSidebarImports],\r\n})\r\n```\r\n\r\n**NgModule:**\r\n\r\n```typescript\r\nimport { BrnSidebarModule } from '@dawit-io/spartan-sidebar-core';\r\n\r\n@NgModule({\r\n  imports: [BrnSidebarModule],\r\n})\r\n```\r\n\r\n## Styled Version\r\n\r\nFor pre-styled components with Tailwind CSS, use [`@dawit-io/spartan-sidebar`](https://www.npmjs.com/package/@dawit-io/spartan-sidebar).\r\n\r\n## Live Demo\r\n\r\n[spartan-dashboard.gojodigital.com](https://spartan-dashboard.gojodigital.com)\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}