@martinstf/ngx-commander-sidebar v0.0.77

Angular Sidebar

Installation

First you need to install package for sidebar and icons:

npm i @martinstf/ngx-commander-sidebar @ng-icons/core @ng-icons/heroicons

In your module or standalone component you need to import SidebarComponent

    imports: [
      ...
      SidebarComponent,
      ...
    ],

Don't forget to include NgIconsModule. You can read more about it here

Usage

Example

You can find example here

  <c-sidebar
    height="100vh"
    [logoConfig]="{
      logo: {
        url: './../assets/full-logo.png',
        height: '50px',
        width: 'auto'
      },
      collapsedLogo: {
        url: './../assets/full-logo.png',
        height: '30px',
        width: 'auto'
      }
    }"
    [sidebarConfig]="largeSidebar"
    [smallSidebarConfig]="smallSidebar"
    [smallSidebarDefaultIndex]="0"
    (onItemClick)="onSidebarItemClick($event)"
  />

Options

Configuration

Theme

You have SidebarTheme enum with all suported themes for sidebar.

Layout

If you dont want to show sidebar (e.g. when you just want small sidebar) just dont provide sidebarConfig property to <c-sidebar/> component.

You can adjust height of each sidebar part (header, body, footer) with CSS flex propery. Default values are shown in exaple below. Also if you dont need header or footer in sidebar you can set show key to false. Default is true for all.

  largeSidebar: LargeSidebarConfig = {
    theme: SidebarTheme.Angular,
    title: 'Sidebar example',
    layout: {
      header: {
        show: true,
        flex: 1,
      },
      body: {
        flex: 8,
      },
      footer: {
        show: false,
        flex: 1,
      },
    },
    routes: [...],
  };

Small sidebar

If you dont want to show small sidebar just dont provide smallSidebarConfig property to <c-sidebar/> component.

  smallSidebar: SmallSidebarConfig = {
    style: {
      width: '55px',
    },
    routes: [...],
  };

Logo config

If you dont want to show logo part of sidebar just dont provide logoConfig property to <c-sidebar/> component.

logo config will be shown when sidebar is expanded and collapsedLogo when sidebar is colapsed.

  logoConfig: SidebarLogoConfig = {
    logo: {
      url: './../assets/full-logo.png',
      height: '50px',
      width: 'auto'
    },
    collapsedLogo: {
      url: './../assets/full-logo.png',
      height: '30px',
      width: 'auto'
    }
  }

Events

Sidebar item types

  <c-sidebar
      [sidebarConfig]="{
      ...
      routes: [
        // Sidebar items
        ...
      ]
    }"
  />

In routes you can pass diferent types of items.

Section title

  {
    title: 'General'
  }

Single sidebar item

  {
    path: ['statistics','users'], // This array will be transformed to 'statistics/users'
    title: 'Statistics',
    icon: 'heroArrowTrendingUp', // Icon from @ng-icons/core
  }

Sidebar dropdown

  {
    opened: false,
    title: 'Customers',
    type: 'dropdown',
    icon: 'heroUsers',
    children: [
	  ...
      {
        path: ['users'],
        title: 'Users',
        icon: 'heroUsers',
      },
	  ...
    ]
  }

Custom content

You can add custom content instade of predefined to: small sidebar, header and footer. Just use ng-container element with proper name:

  <c-sidebar
    // All configuration props here...
  >

    <ng-container smallSidebar>
      <p>Small sidebar custom content</p>
    </ng-container>

    <ng-container header>
      <p>Header custom content</p>
    </ng-container>

    <ng-container footer>
      <p>Footer custom content</p>
    </ng-container>

  </c-sidebar>

Responsive

If you have additional styling or change positions of burger menu button on mobile you can target class .CMND-mobile-sidebar-btn

If you want to change icon for button you can do it like this:

  <c-sidebar
    ...
    burgerMenuIcon="heroBars4"
    ...
  >

Colors

If you want different colors you can overide this CSS variables

:root {
  // Small sidebar
  --ngx-commander-small-sidebar-background: #f5f7f9;
  --ngx-commander-small-sidebar-active-text: #215bde;
  --ngx-commander-small-sidebar-text: black;
  --ngx-commander-small-sidebar-item-active-background: #e6ebef;
  --ngx-commander-small-sidebar-item-background: #e6ebef;
  --ngx-commander-small-sidebar-active-border: #215bde;
  --ngx-commander-small-sidebar-font: 'Inter', sans-serif;

  // Large sidebar
  --ngx-commander-large-sidebar-background: #fff;
  --ngx-commander-large-sidebar-icon: #9194a1;
  --ngx-commander-large-sidebar-active-icon: #215bde;
  --ngx-commander-large-sidebar-active-text: #215bde;
  --ngx-commander-large-sidebar-text: #9194a1;
  --ngx-commander-large-sidebar-item-active-background: #f0f4f6;
  --ngx-commander-large-sidebar-item-background: #fff;
  --ngx-commander-large-sidebar-font: 'Inter', sans-serif;
  --ngx-commander-large-sidebar-menu-btn-color: #215bde;
}