import { Component } from '@angular/core'; import { NgIcon, provideIcons } from '@ng-icons/core'; import { lucideCalendar, lucideHouse, lucideInbox, lucideSearch, lucideSettings } from '@ng-icons/lucide'; import { HlmIcon } from '@spartan-ng/helm/icon'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; @Component({ selector: 'spartan-sidebar', imports: [HlmSidebarImports, NgIcon, HlmIcon], template: `

Application

{{ item.title }}

`, providers: [ provideIcons({ lucideHouse, lucideInbox, lucideCalendar, lucideSearch, lucideSettings, }), ], }) export class SidebarComponent { protected readonly _items = [ { title: 'Home', url: '#', icon: 'lucideHouse', }, { title: 'Inbox', url: '#', icon: 'lucideInbox', }, { title: 'Calendar', url: '#', icon: 'lucideCalendar', }, { title: 'Search', url: '#', icon: 'lucideSearch', }, { title: 'Settings', url: '#', icon: 'lucideSettings', }, ]; } @Component({ imports: [SidebarComponent, HlmSidebarImports], selector: 'spartan-sidebar-preview', template: `

`, }) export class SidebarPreviewComponent {} export const cssCode = ` @layer base { :root { --sidebar: 300 0% 98%; --sidebar-foreground: 300 0% 4%; --sidebar-primary: 330 0% 9%; --sidebar-primary-foreground: 300 0% 98%; --sidebar-accent: 300 0% 96%; --sidebar-accent-foreground: 330 0% 9%; --sidebar-border: 330 0% 90%; --sidebar-ring: 0 0% 63%; } .dark { --sidebar: 300 0% 98%; --sidebar-foreground: 300 0% 4%; --sidebar-primary: 330 0% 9%; --sidebar-primary-foreground: 300 0% 98%; --sidebar-accent: 300 0% 96%; --sidebar-accent-foreground: 330 0% 9%; --sidebar-border: 330 0% 90%; --sidebar-ring: 0 0% 63%; } } `; export const usageLayout = ` import { Component } from '@angular/core'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; @Component({ selector: 'app-sidebar', imports: [ HlmSidebarImports, ], template: \`

\`, }) export class AppSidebar {} `; export const usageApp = ` import { Component } from '@angular/core'; import { AppSidebar } from './app-sidebar'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; @Component({ imports: [AppSidebar, HlmSidebarImports], selector: 'app-root', template: \`

\`, }) export class App {} `; export const firstSidebarApp = ` import { Component } from '@angular/core'; import { AppSidebar } from './app-sidebar'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; import { RouterOutlet } from '@angular/router'; @Component({ imports: [AppSidebar, HlmSidebarImports, RouterOutlet], selector: 'app-root', template: \`

\`, }) export class App {} `; export const firstSidebarInitial = ` import { Component } from '@angular/core'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; @Component({ selector: 'app-sidebar', imports: [HlmSidebarImports], template: \`

\`, }) export class AppSidebar {} `; export const firstSidebar = ` import { Component } from '@angular/core'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; import { lucideCalendar, lucideHouse, lucideInbox, lucideSearch, lucideSettings } from '@ng-icons/lucide'; import { NgIcon, provideIcons } from '@ng-icons/core'; import { HlmIcon } from '@spartan-ng/helm/icon'; @Component({ selector: 'app-sidebar', imports: [ HlmSidebarImports, NgIcon, HlmIcon, ], template: \`

Application

{{ item.title }}

\`, providers: [ provideIcons({ lucideHouse, lucideInbox, lucideCalendar, lucideSearch, lucideSettings, }), ], }) export class AppSidebar { protected readonly _items = [ { title: 'Home', url: '#', icon: 'lucideHouse', }, { title: 'Inbox', url: '#', icon: 'lucideInbox', }, { title: 'Calendar', url: '#', icon: 'lucideCalendar', }, { title: 'Search', url: '#', icon: 'lucideSearch', }, { title: 'Settings', url: '#', icon: 'lucideSettings', }, ]; } `; export const provider = ` import { ApplicationConfig } from '@angular/core'; import { provideHlmSidebarConfig } from '@spartan-ng/helm/sidebar'; export const appConfig: ApplicationConfig = { providers: [ provideHlmSidebarConfig({ ... sidebarWidth: '16rem', sidebarWidthMobile: '18rem', sidebarWidthIcon: '3rem', sidebarCookieName: 'sidebar_state', sidebarCookieMaxAge: 60 * 60 * 24 * 7, sidebarKeyboardShortcut: 'b', mobileBreakpoint: '768px', }), ], }; `; export const header = ` import { Component } from '@angular/core'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; import { HlmMenuImports } from '@spartan-ng/helm/menu'; import { BrnMenuImports } from '@spartan-ng/brain/menu'; import { NgIcon, provideIcons } from '@ng-icons/core'; import { HlmIcon } from '@spartan-ng/helm/icon'; import { lucideChevronDown } from '@ng-icons/lucide'; @Component({ selector: 'app-sidebar', imports: [ HlmSidebarImports, HlmMenuImports, BrnMenuImports, NgIcon, HlmIcon, ], template: \`

Acme Inc Acme Corp.

\`, providers: [ provideIcons({ lucideChevronDown, }), ], }) export class AppSidebar {} `; export const footer = ` import { Component } from '@angular/core'; import { NgIcon, provideIcons } from '@ng-icons/core'; import { lucideChevronUp } from '@ng-icons/lucide'; import { BrnMenuImports } from '@spartan-ng/brain/menu'; import { HlmIcon } from '@spartan-ng/helm/icon'; import { HlmMenuImports } from '@spartan-ng/helm/menu'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; @Component({ selector: 'app-sidebar', imports: [HlmSidebarImports, HlmMenuImports, BrnMenuImports, NgIcon, HlmIcon], template: \`

\`, providers: [ provideIcons({ lucideChevronUp, }), ], }) export class AppSidebar {} `; export const content = ` import { Component } from '@angular/core'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; @Component({ selector: 'app-sidebar', imports: [HlmSidebarImports], template: \`

\`, }) export class AppSidebar {}`; export const group = ` import { Component } from '@angular/core'; import { NgIcon, provideIcons } from '@ng-icons/core'; import { lucideLifeBuoy, lucideSend } from '@ng-icons/lucide'; import { HlmIcon } from '@spartan-ng/helm/icon'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; @Component({ selector: 'app-sidebar', imports: [HlmSidebarImports, NgIcon, HlmIcon], template: \`

Help

Support
Feedback

\`, providers: [ provideIcons({ lucideLifeBuoy, lucideSend, }), ], }) export class AppSidebar {} `; export const collapsable = ` import { Component } from '@angular/core'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; import { NgIcon, provideIcons } from '@ng-icons/core'; import { HlmIcon } from '@spartan-ng/helm/icon'; import { lucideChevronDown, lucideLifeBuoy, lucideSend, } from '@ng-icons/lucide'; import { BrnCollapsibleImports } from '@spartan-ng/brain/collapsible'; @Component({ selector: 'app-sidebar', imports: [HlmIcon, NgIcon, BrnCollapsibleImports, HlmSidebarImports], template: \`

Support
Feedback

\`, providers: [ provideIcons({ lucideLifeBuoy, lucideSend, lucideChevronDown, }), ], }) export class AppSidebar {} `; export const groupAction = ` import { Component } from '@angular/core'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; import { NgIcon, provideIcons } from '@ng-icons/core'; import { HlmIcon } from '@spartan-ng/helm/icon'; import { lucideChartPie, lucideFrame, lucideMap, lucidePlus, } from '@ng-icons/lucide'; import { toast } from 'ngx-sonner'; import { HlmToasterImports } from '@spartan-ng/helm/sonner'; @Component({ selector: 'app-sidebar', imports: [HlmSidebarImports, NgIcon, HlmIcon, HlmToasterImports], template: \`

Projects

\`, providers: [ provideIcons({ lucideFrame, lucideChartPie, lucideMap, lucidePlus, }), ], }) export class AppSidebar { protected _onAddProject(): void { toast.info('You clicked the group action!'); } } `; export const menu = ` import { Component } from '@angular/core'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; import { NgIcon, provideIcons } from '@ng-icons/core'; import { HlmIcon } from '@spartan-ng/helm/icon'; import { lucideChartPie, lucideFrame, lucideLifeBuoy, lucideMap, lucideSend, } from '@ng-icons/lucide'; @Component({ selector: 'app-sidebar', imports: [HlmSidebarImports, NgIcon, HlmIcon], template: \`

Projects

{{ project.name }}

\`, providers: [ provideIcons({ lucideFrame, lucideChartPie, lucideMap, lucideLifeBuoy, lucideSend, }), ], }) export class AppSidebar { protected readonly _projects = [ { name: 'Design Engineering', url: '#', icon: 'lucideFrame' }, { name: 'Sales & Marketing', url: '#', icon: 'lucideChartPie' }, { name: 'Travel', url: '#', icon: 'lucideMap' }, { name: 'Support', url: '#', icon: 'lucideLifeBuoy' }, { name: 'Feedback', url: '#', icon: 'lucideSend' }, ]; } `; export const link = `

Home

`; export const linkWithIcon = `

Home

`; export const linkActive = `

Home

`; export const button = `

`; export const menuAction = `

Home

`; export const menuActionExample = ` import { Component } from '@angular/core'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; import { BrnMenuImports } from '@spartan-ng/brain/menu'; import { NgIcon, provideIcons } from '@ng-icons/core'; import { HlmIcon } from '@spartan-ng/helm/icon'; import { lucideChartPie, lucideEllipsis, lucideFrame, lucideLifeBuoy, lucideMap, lucideSend, } from '@ng-icons/lucide'; import { HlmMenuImports } from '@spartan-ng/helm/menu'; @Component({ selector: 'app-sidebar', imports: [HlmSidebarImports, BrnMenuImports, NgIcon, HlmIcon, HlmMenuImports], template: \`

Projects

{{ project.name }}

\`, providers: [ provideIcons({ lucideFrame, lucideChartPie, lucideMap, lucideLifeBuoy, lucideSend, lucideEllipsis, }), ], }) export class AppSidebar { projects = [ { name: 'Design Engineering', url: '#', icon: 'lucideFrame' }, { name: 'Sales & Marketing', url: '#', icon: 'lucideChartPie' }, { name: 'Travel', url: '#', icon: 'lucideMap' }, { name: 'Support', url: '#', icon: 'lucideLifeBuoy' }, { name: 'Feedback', url: '#', icon: 'lucideSend' }, ]; } `; export const menuSubExample = ` import { Component } from '@angular/core'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; @Component({ selector: 'app-sidebar', imports: [HlmSidebarImports], template: \`

\`, }) export default class AppSidebar { protected readonly _items = [ { title: 'Getting Started', items: [{ title: 'Installation' }, { title: 'Project Structure' }], }, { title: 'Building Your Application', items: [ { title: 'Routing' }, { title: 'Data Fetching', isActive: true }, { title: 'Rendering' }, { title: 'Caching' }, { title: 'Styling' }, { title: 'Optimizing' }, { title: 'Configuring' }, { title: 'Testing' }, { title: 'Authentication' }, { title: 'Deploying' }, { title: 'Upgrading' }, { title: 'Examples' }, ], }, { title: 'API Reference', items: [ { title: 'Components' }, { title: 'File Conventions' }, { title: 'Functions' }, { title: 'next.config.js Options' }, { title: 'CLI' }, { title: 'Edge Runtime' }, ], }, { title: 'Architecture', items: [ { title: 'Accessibility' }, { title: 'Fast Refresh' }, { title: 'Next.js Compiler' }, { title: 'Supported Browsers' }, { title: 'Turbopack' }, ], }, ]; } `; export const menuSubCollapsableExample = ` import { Component } from '@angular/core'; import { NgIcon, provideIcons } from '@ng-icons/core'; import { lucideChevronRight } from '@ng-icons/lucide'; import { BrnCollapsibleImports } from '@spartan-ng/brain/collapsible'; import { HlmIcon } from '@spartan-ng/helm/icon'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; @Component({ selector: 'app-sidebar', imports: [HlmSidebarImports, BrnCollapsibleImports, NgIcon, HlmIcon], template: \`

\`, providers: [provideIcons({ lucideChevronRight })], }) export default class AppSidebar { protected readonly _items = [ { title: 'Getting Started', defaultOpen: true, items: [{ title: 'Installation' }, { title: 'Project Structure' }], }, { title: 'Building Your Application', defaultOpen: false, items: [ { title: 'Routing' }, { title: 'Data Fetching', isActive: true }, { title: 'Rendering' }, { title: 'Caching' }, { title: 'Styling' }, { title: 'Optimizing' }, { title: 'Configuring' }, { title: 'Testing' }, { title: 'Authentication' }, { title: 'Deploying' }, { title: 'Upgrading' }, { title: 'Examples' }, ], }, { title: 'API Reference', defaultOpen: false, items: [ { title: 'Components' }, { title: 'File Conventions' }, { title: 'Functions' }, { title: 'next.config.js Options' }, { title: 'CLI' }, { title: 'Edge Runtime' }, ], }, { title: 'Architecture', defaultOpen: false, items: [ { title: 'Accessibility' }, { title: 'Fast Refresh' }, { title: 'Next.js Compiler' }, { title: 'Supported Browsers' }, { title: 'Turbopack' }, ], }, ]; } `; export const menuBadge = ` import { Component } from '@angular/core'; import { NgIcon, provideIcons } from '@ng-icons/core'; import { lucideChartPie, lucideFrame, lucideLifeBuoy, lucideMap, lucideSend } from '@ng-icons/lucide'; import { HlmIcon } from '@spartan-ng/helm/icon'; import { HlmSidebarImports } from '@spartan-ng/helm/sidebar'; @Component({ selector: 'app-sidebar', imports: [HlmSidebarImports, NgIcon, HlmIcon], template: \`

Projects

{{ project.info }}

\`, providers: [ provideIcons({ lucideFrame, lucideChartPie, lucideMap, lucideLifeBuoy, lucideSend, }), ], }) export class AppSidebar { protected readonly _projects = [ { info: 24, name: 'Design Engineering', url: '#', icon: 'lucideFrame' }, { info: 12, name: 'Sales & Marketing', url: '#', icon: 'lucideChartPie' }, { info: 3, name: 'Travel', url: '#', icon: 'lucideMap' }, { info: 21, name: 'Support', url: '#', icon: 'lucideLifeBuoy' }, { info: 8, name: 'Feedback', url: '#', icon: 'lucideSend' }, ]; } `; export const skeleton = `

`; export const separator = `

Spartans get ready! v1 is coming!

Getting Started

Stack

UI

Components