Sticky-Sidebar

Status

DEMO

REPOSITORY

A Customizable Sidebar Angular Component

Installation

npm install --save ngx-sticky-sidebar

Usage

Add NgxStickySidebarModule to your project:

app module:

import { NgxStickySidebarModule } from 'ngx-sticky-sidebar';

@NgModule({
  declarations: [ AppComponent ],
  imports: [ BrowserModule, NgxStickySidebarModule ],
  bootstrap: [ AppComponent ],
})
class AppModule {}

or layout component:

import { NgxStickySidebarModule } from 'ngx-sticky-sidebar';

@Component({
  selector: 'app-layout',
  standalone: true,
  imports: [
    NgxStickySidebarModule
  ],
  template: '',
  styles: []
})
export class LayoutComponent {}

Add <ngx-sticky-sidebar> to your layout template:

<ngx-sticky-sidebar [items]="items" [backgroundColor]="backgroundColor" [color]="color">
    <div id="sidebar-header" style="text-align: center;">
        <span> Sticky Sidebar </span>
    </div>
    <div id="sidebar-content">
        <span>Page Content</span>
        <router-outlet></router-outlet>
    </div>
</ngx-sticky-sidebar>

Inputs

| Property | Type | Default | Description | |----------|------|---------|-------------| | items | StickySidebarItems[] | [] | Elements for sidebar list. | | backgroundColor | string | black | Sidebar background color. | | color | string | white | Sidebar font color. | | width | string | 220px | Sidebar width size. | | padding | string | 1rem | Sidebar padding. | | backdropColor | string | #00000054 | Backdrop color. | | transitionDelay | string | 0.5s | Time (in sec) for each transition. | | overWidth | number | 992 | If the screen width is equal to or less than that value, the sidebar should disappear.| | dropWidth | number | 992 | If the screen width is equal to or less than that value, the sidebar should appear. | | closeBtnSize | number | 15 | Close button size for small screen widths. | | autoRoute | boolean | true | (Items with children) Determine the default route when clicking on the item without specifying a child. |

State

Add NgxStickySidebarService where you want get or set sidebar state:

import { NgxStickySidebarService } from 'ngx-sticky-sidebar';

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss']
})
export class LayoutComponent {
    state: boolean;

    constructor( private sidebar: NgxStickySidebarService ) {
        this.sidebar.stateAsObs.subscribe((state: boolean) => {
            this.state = state;
        })
    }

    toogle(): void {
        this.sidebar.toggle();
    }

    set_value(value: boolean): void {
        this.sidebar.set_state = value;
    }
}

Items

Declare your sidebar items.

E.g:

items: StickySidebarItems[] = [
    {
      label: 'Home',
      route: '/',
      childs: []
    },
    {
      label: 'Apps',
      route: '/apps',
      collapse: true,
      iconClass: 'bi bi-window-plus', // <-- using Boostrap Icons
      childs: [
        {
          label: 'One',
          route: '/one'
        },
        {
          label: 'Two',
          route: '/two'
        }
      ]
    }
]

Properties

| Property | Type | Description | | -------- | ---- | ----------- | | label | string | Text of item to display on sidebar list | | route | string | Route to navigate upon clicking | | childs | { label: string, route: string }[] | Text and routes for item's children | | collapse | boolean | Default value for collapse item if have children | | iconClass | string | Class name for <i> element to display custom icon |