{"_id":"@dawit-io/spartan-sidebar","_rev":"7-e113de78eabc0934a6f211e2294b76b4","name":"@dawit-io/spartan-sidebar","dist-tags":{"alpha":"0.0.2-alpha.2","latest":"0.0.7"},"versions":{"0.0.2-alpha.1":{"name":"@dawit-io/spartan-sidebar","version":"0.0.2-alpha.1","keywords":["angular","sidebar","component","ui","helm"],"author":{"name":"Dawit","email":"dawit@gojodigital.com"},"license":"MIT","_id":"@dawit-io/spartan-sidebar@0.0.2-alpha.1","maintainers":[{"name":"dawit-io","email":"dawit@gojodigital.com"}],"homepage":"https://spartan-dashboard.gojodigital.com/showcase","bugs":{"url":"https://github.com/dawit-io/spartan-dashboard/issues"},"dist":{"shasum":"d4c9f215a9db7515d3ad31392740fd79983b78e8","tarball":"https://registry.npmjs.org/@dawit-io/spartan-sidebar/-/spartan-sidebar-0.0.2-alpha.1.tgz","fileCount":21,"integrity":"sha512-6/ScwzklediCFeqO5hdSqnOMayF/R7wKEWsAGL42uw20geptCE9DkhQ0RNFv82AGayW4y0Sc825sH+RrRRFF3g==","signatures":[{"sig":"MEUCIBY7W23+yau77cESW4CjYTkPzNCmhYd4b0wu4jQQYjckAiEAtkCyj6DcGdhb4I/k4Iwr2EEauJ2GKWFilZKFXc7Bo24=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":121756},"module":"fesm2022/dawit-io-spartan-sidebar.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/dawit-io-spartan-sidebar.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"7550b500389ebef24ca95ed9fcedbc2033dbb252","typings":"index.d.ts","_npmUser":{"name":"dawit-io","email":"dawit@gojodigital.com"},"repository":{"url":"git+https://github.com/dawit-io/spartan-dashboard.git","type":"git"},"_npmVersion":"11.0.0","description":"Angular sidebar component library - helm implementation","directories":{},"sideEffects":false,"_nodeVersion":"22.13.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"clsx":">=2.1.1","@angular/core":"^19.2.0","@ng-icons/core":">=29.0.0","@angular/common":"^19.2.0","@ng-icons/lucide":">=29.0.0","@spartan-ng/brain":">=0.0.1-alpha.429","@spartan-ng/ui-icon-helm":">=0.0.1-alpha.357","@dawit-io/spartan-sidebar-core":">=0.0.1"},"_npmOperationalInternal":{"tmp":"tmp/spartan-sidebar_0.0.2-alpha.1_1748093418763_0.5928566258534225","host":"s3://npm-registry-packages-npm-production"}},"0.0.2-alpha.2":{"name":"@dawit-io/spartan-sidebar","version":"0.0.2-alpha.2","keywords":["angular","sidebar","component","ui","helm"],"author":{"name":"Dawit","email":"dawit@gojodigital.com"},"license":"MIT","_id":"@dawit-io/spartan-sidebar@0.0.2-alpha.2","maintainers":[{"name":"dawit-io","email":"dawit@gojodigital.com"}],"homepage":"https://spartan-dashboard.gojodigital.com/showcase","bugs":{"url":"https://github.com/dawit-io/spartan-dashboard/issues"},"dist":{"shasum":"a0cd969d7c92cd72646d202ec3cdc3b90a51c935","tarball":"https://registry.npmjs.org/@dawit-io/spartan-sidebar/-/spartan-sidebar-0.0.2-alpha.2.tgz","fileCount":21,"integrity":"sha512-aIH7BhjdtoS0UV1Sg9gzrJg4G+UWvf4TGRrArFdk1v6p89oRSv8GPQxQTdBMP42059v8FpSTg9trj7KBCYL31g==","signatures":[{"sig":"MEYCIQCJPEGO5ODx5UNmHTE4rgasPxAMEs7cyRpsF9EaNbrPmwIhALKXf6E6IWYmRIIczSnzU8ALwSORb6ae+w0R0FwwvZRU","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":121764},"module":"fesm2022/dawit-io-spartan-sidebar.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/dawit-io-spartan-sidebar.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"7550b500389ebef24ca95ed9fcedbc2033dbb252","typings":"index.d.ts","_npmUser":{"name":"dawit-io","email":"dawit@gojodigital.com"},"repository":{"url":"git+https://github.com/dawit-io/spartan-dashboard.git","type":"git"},"_npmVersion":"11.0.0","description":"Angular sidebar component library - helm implementation","directories":{},"sideEffects":false,"_nodeVersion":"22.13.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","peerDependencies":{"clsx":">=2.1.1","@angular/core":"^19.2.0","@ng-icons/core":">=29.0.0","@angular/common":"^19.2.0","@ng-icons/lucide":">=29.0.0","@spartan-ng/brain":">=0.0.1-alpha.429","@spartan-ng/ui-icon-helm":">=0.0.1-alpha.357","@dawit-io/spartan-sidebar-core":">=0.0.1-alpha.1"},"_npmOperationalInternal":{"tmp":"tmp/spartan-sidebar_0.0.2-alpha.2_1748099705184_0.6371192912763133","host":"s3://npm-registry-packages-npm-production"}},"0.0.6":{"name":"@dawit-io/spartan-sidebar","version":"0.0.6","keywords":["angular","sidebar","component","ui","helm"],"author":{"name":"Dawit","email":"dawit@gojodigital.com"},"license":"MIT","_id":"@dawit-io/spartan-sidebar@0.0.6","maintainers":[{"name":"dawit-io","email":"dawit@gojodigital.com"}],"homepage":"https://spartan-dashboard.gojodigital.com/showcase","bugs":{"url":"https://github.com/dawit-io/spartan-dashboard/issues"},"dist":{"shasum":"7230af5cb67b4f7521022bd680fde1307d098ef9","tarball":"https://registry.npmjs.org/@dawit-io/spartan-sidebar/-/spartan-sidebar-0.0.6.tgz","fileCount":21,"integrity":"sha512-MpFCVgNG2i6mB7FI87DvjsMU33UANW4Xej2e+hVarEBffp4ISoGxZhoxV6L+KVGOGjdI2GEGQCthTW1O240PhQ==","signatures":[{"sig":"MEUCIALalB3fpa7eSJH4JfHg+hAPBM1v6swA749H0/3yIkGMAiEA6kdFNgIrTMo72LAbA7CkR6yl3BhpfV3MvnEu8ipQbNo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":126424},"module":"fesm2022/dawit-io-spartan-sidebar.mjs","exports":{".":{"types":"./index.d.ts","default":"./fesm2022/dawit-io-spartan-sidebar.mjs"},"./package.json":{"default":"./package.json"}},"gitHead":"71b45006d67131875377c86a7552d217fac0aa58","typings":"index.d.ts","_npmUser":{"name":"dawit-io","email":"dawit@gojodigital.com"},"repository":{"url":"git+https://github.com/dawit-io/spartan-dashboard.git","type":"git"},"_npmVersion":"11.0.0","description":"Angular sidebar component library - helm implementation","directories":{},"sideEffects":false,"_nodeVersion":"22.13.0","dependencies":{"tslib":"^2.3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"peerDependencies":{"clsx":">=2.1.1","@angular/core":"^19.2.0","@ng-icons/core":">=29.0.0","@angular/common":"^19.2.0","@ng-icons/lucide":">=29.0.0","@spartan-ng/brain":">=0.0.1-alpha.429","@spartan-ng/ui-icon-helm":">=0.0.1-alpha.357","@dawit-io/spartan-sidebar-core":">=0.0.6"},"_npmOperationalInternal":{"tmp":"tmp/spartan-sidebar_0.0.6_1771107754137_0.16733419964739937","host":"s3://npm-registry-packages-npm-production"}},"0.0.7":{"name":"@dawit-io/spartan-sidebar","version":"0.0.7","description":"Angular sidebar component library - helm implementation","keywords":["angular","sidebar","component","ui","helm"],"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","@ng-icons/core":">=29.0.0","@ng-icons/lucide":">=29.0.0","@dawit-io/spartan-sidebar-core":">=0.0.6","clsx":">=2.1.1","@spartan-ng/brain":">=0.0.1-alpha.429"},"dependencies":{"tslib":"^2.3.0"},"sideEffects":false,"publishConfig":{"access":"public"},"module":"fesm2022/dawit-io-spartan-sidebar.mjs","typings":"index.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./index.d.ts","default":"./fesm2022/dawit-io-spartan-sidebar.mjs"}},"_id":"@dawit-io/spartan-sidebar@0.0.7","gitHead":"9faa2e6d5cf3bc549ae389bebb3ea0956311c7ee","_nodeVersion":"22.13.0","_npmVersion":"11.0.0","dist":{"integrity":"sha512-1NPUma3Lrlb478GY+rARtRSAhpiGXmBGyZ6hZ47X5MAAdzxJTR1L9JawFOQNVa5IHCo2OHaTtTyiGGUP81C5JA==","shasum":"a29d37322833ac7214d67b5dbe1900b42cc36614","tarball":"https://registry.npmjs.org/@dawit-io/spartan-sidebar/-/spartan-sidebar-0.0.7.tgz","fileCount":21,"unpackedSize":126371,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIDKzkooljZfrVS5iG/idTyaee4uxZxS/xk1s8QN5ulLmAiEAnrC5poK5RjX88vAJemy50mTxmgOhYBz9pvHy7beJdCE="}]},"_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_0.0.7_1771114721234_0.2847315765099532"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-24T13:30:18.661Z","modified":"2026-02-15T00:18:41.577Z","0.0.1":"2025-05-24T07:14:04.366Z","0.0.2-alpha.1":"2025-05-24T13:30:18.954Z","0.0.2-alpha.2":"2025-05-24T15:15:05.389Z","0.0.6":"2026-02-14T22:22:34.296Z","0.0.7":"2026-02-15T00:18:41.447Z"},"bugs":{"url":"https://github.com/dawit-io/spartan-dashboard/issues"},"author":{"name":"Dawit","email":"dawit@gojodigital.com"},"license":"MIT","homepage":"https://spartan-dashboard.gojodigital.com/showcase","keywords":["angular","sidebar","component","ui","helm"],"repository":{"type":"git","url":"git+https://github.com/dawit-io/spartan-dashboard.git"},"description":"Angular sidebar component library - helm implementation","maintainers":[{"name":"dawit-io","email":"dawit@gojodigital.com"}],"readme":"# @dawit-io/spartan-sidebar\r\n\r\nPre-styled Angular sidebar components built on [spartan-ng](https://www.spartan.ng/) Brain/Helm patterns with Tailwind CSS. 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 @dawit-io/spartan-sidebar-core\r\n```\r\n\r\n### Peer Dependencies\r\n\r\nThe following packages are required and should already be in most spartan-ng projects:\r\n\r\n```bash\r\nnpm install @ng-icons/core @ng-icons/lucide @spartan-ng/ui-icon-helm @spartan-ng/brain clsx\r\n```\r\n\r\n## Quick Start\r\n\r\n```typescript\r\nimport {\r\n  HlmSidebarComponent,\r\n  HlmSidebarHeaderComponent,\r\n  HlmSidebarBrandComponent,\r\n  HlmSidebarNavComponent,\r\n  HlmSidebarItemComponent,\r\n  HlmSidebarFooterComponent,\r\n  HlmSidebarTriggerComponent,\r\n  HlmSidebarContentHeaderComponent,\r\n} from '@dawit-io/spartan-sidebar';\r\nimport { NgIcon, provideIcons } from '@ng-icons/core';\r\nimport { lucideLayoutDashboard, lucideSettings } from '@ng-icons/lucide';\r\n\r\n@Component({\r\n  selector: 'app-layout',\r\n  standalone: true,\r\n  imports: [\r\n    HlmSidebarComponent,\r\n    HlmSidebarHeaderComponent,\r\n    HlmSidebarBrandComponent,\r\n    HlmSidebarNavComponent,\r\n    HlmSidebarItemComponent,\r\n    HlmSidebarFooterComponent,\r\n    HlmSidebarTriggerComponent,\r\n    HlmSidebarContentHeaderComponent,\r\n    NgIcon,\r\n  ],\r\n  providers: [provideIcons({ lucideLayoutDashboard, lucideSettings })],\r\n  template: `\r\n    <div class=\"flex min-h-screen\">\r\n      <hlm-sidebar [variant]=\"'sidebar'\" [collapsibleMode]=\"'icon'\">\r\n        <hlm-sidebar-header>\r\n          <hlm-sidebar-brand>\r\n            <ng-icon hlm name=\"lucideLayoutDashboard\" class=\"h-6 w-6\" />\r\n            <span class=\"text-sm font-semibold\">My App</span>\r\n          </hlm-sidebar-brand>\r\n        </hlm-sidebar-header>\r\n\r\n        <hlm-sidebar-nav>\r\n          <hlm-sidebar-item label=\"Dashboard\" routerLink=\"/dashboard\">\r\n            <ng-icon hlm name=\"lucideLayoutDashboard\" class=\"h-4 w-4\" />\r\n          </hlm-sidebar-item>\r\n          <hlm-sidebar-item label=\"Settings\" routerLink=\"/settings\">\r\n            <ng-icon hlm name=\"lucideSettings\" class=\"h-4 w-4\" />\r\n          </hlm-sidebar-item>\r\n        </hlm-sidebar-nav>\r\n\r\n        <hlm-sidebar-footer title=\"User Name\" subtitle=\"user@example.com\">\r\n          <ng-icon hlm name=\"lucideSettings\" class=\"h-5 w-5\" />\r\n        </hlm-sidebar-footer>\r\n      </hlm-sidebar>\r\n\r\n      <div class=\"flex-1\">\r\n        <hlm-sidebar-content-header>\r\n          <hlm-sidebar-trigger />\r\n        </hlm-sidebar-content-header>\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\r\n\r\n| Selector | Description | Key Inputs |\r\n|----------|-------------|------------|\r\n| `hlm-sidebar` | Root sidebar container. Extends `BrnSidebarComponent`. | `variant`, `collapsibleMode`, `isCollapsible`, `isOverlay`, `userClass` |\r\n| `hlm-sidebar-trigger` | Toggle button with panel icons. | `userClass` |\r\n| `hlm-sidebar-header` | Top area of the sidebar. | `userClass` |\r\n| `hlm-sidebar-brand` | Logo and title slot. Projects `ng-icon` and text content. | `userClass` |\r\n| `hlm-sidebar-nav` | Navigation list container. | `userClass` |\r\n| `hlm-sidebar-item` | Navigation item with icon, label, and auto-tooltip when collapsed. | `label` (required), `routerLink`, `routerLinkActive`, `userClass` |\r\n| `hlm-sidebar-group` | Collapsible group container. | `items: SidebarNavItem[]`, `userClass` |\r\n| `hlm-sidebar-group-label` | Clickable group header with chevron and collapsed tooltip. | `label`, `items: SidebarNavItem[]`, `userClass` |\r\n| `hlm-sidebar-group-content` | Animated expandable content for group items. | `items: SidebarNavItem[]`, `userClass` |\r\n| `hlm-sidebar-footer` | Bottom section with user info and auto-tooltip when collapsed. | `title` (required), `subtitle` (required), `userClass` |\r\n| `hlm-sidebar-content-header` | Header bar for the main content area (holds trigger + breadcrumb). | `withBorder`, `userClass` |\r\n| `hlm-sidebar-inset` | Wrapper for inset variant layouts. | `userClass` |\r\n| `[hlmSidebarSectionTitle]` | Section divider text. Hidden when sidebar is collapsed. | `userClass` |\r\n| `hlm-sidebar-group-tooltip` | Popup menu shown on hover for collapsed groups. | `groupLabel`, `items: SidebarNavItem[]` |\r\n\r\n## Outputs\r\n\r\n| Component | Output | Description |\r\n|-----------|--------|-------------|\r\n| `hlm-sidebar-item` | `clicked` | Emitted when the item is clicked |\r\n| `hlm-sidebar-footer` | `clicked` | Emitted when the footer button is clicked |\r\n| `hlm-sidebar-group-tooltip` | `navigate` | Emitted with the link string when a tooltip item is clicked |\r\n\r\n## SidebarNavItem Interface\r\n\r\nUsed by group components to render navigation items:\r\n\r\n```typescript\r\ninterface SidebarNavItem {\r\n  label: string;\r\n  link: string;\r\n  routerLinkActive?: string;\r\n}\r\n```\r\n\r\n## Collapsible Groups Example\r\n\r\n```html\r\n<hlm-sidebar-nav>\r\n  <div hlmSidebarSectionTitle>Platform</div>\r\n\r\n  <hlm-sidebar-group>\r\n    <hlm-sidebar-group-label [label]=\"'Playground'\" [items]=\"playgroundItems\">\r\n      <ng-icon hlm name=\"lucideLayoutDashboard\" class=\"h-4 w-4 text-muted-foreground\" />\r\n    </hlm-sidebar-group-label>\r\n    <hlm-sidebar-group-content [items]=\"playgroundItems\" />\r\n  </hlm-sidebar-group>\r\n</hlm-sidebar-nav>\r\n```\r\n\r\n```typescript\r\nplaygroundItems: SidebarNavItem[] = [\r\n  { label: 'History', link: '/history' },\r\n  { label: 'Starred', link: '/starred' },\r\n  { label: 'Settings', link: '/settings' },\r\n];\r\n```\r\n\r\n## Variants & Collapsible Modes\r\n\r\n### Variants (`SidebarVariant`)\r\n\r\n| Value | Description |\r\n|-------|-------------|\r\n| `'sidebar'` | Standard sticky sidebar on the left |\r\n| `'floating'` | Absolute positioned with shadow, popover style |\r\n| `'inset'` | Card-style sidebar with borders and margins |\r\n\r\n### Collapsible Modes (`CollapsibleMode`)\r\n\r\n| Value | Description |\r\n|-------|-------------|\r\n| `'icon'` | Collapses to narrow icon bar (w-16). Items show tooltips on hover. |\r\n| `'offcanvas'` | Slides in/out with transform animation. Used automatically on mobile. |\r\n| `'none'` | Always fully visible, no toggle behavior. |\r\n\r\n## Dark Mode\r\n\r\nWorks automatically when the `dark` class is applied to a parent element. The sidebar uses CSS variables from the Tailwind/spartan-ng theme system (`--background`, `--foreground`, `--border`, `--muted`, etc.).\r\n\r\n## Import Options\r\n\r\n**Standalone (recommended):**\r\n\r\n```typescript\r\nimport { HlmSidebarComponent, HlmSidebarItemComponent } from '@dawit-io/spartan-sidebar';\r\n```\r\n\r\n**Convenience array:**\r\n\r\n```typescript\r\nimport { HlmSidebarImports } from '@dawit-io/spartan-sidebar';\r\n\r\n@Component({\r\n  imports: [...HlmSidebarImports],\r\n})\r\n```\r\n\r\n**NgModule:**\r\n\r\n```typescript\r\nimport { HlmSidebarModule } from '@dawit-io/spartan-sidebar';\r\n\r\n@NgModule({\r\n  imports: [HlmSidebarModule],\r\n})\r\n```\r\n\r\n## Headless Core\r\n\r\nFor unstyled primitives or to build your own design system, use [`@dawit-io/spartan-sidebar-core`](https://www.npmjs.com/package/@dawit-io/spartan-sidebar-core).\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"}