Ngx-minisidebar NPM

NgxMinisidebar - Open Source Library for Angular Web Apps to provide a nice collapsable sidebar that is small and customizable

This project is an easy to use Library based from Jeff Delaney awesome video

❓ Why use ngx-miniSidebar

:Because Material design doesn't yet provide a mini sidebar
:Because I plan to maintain as small of a code footprint as possible.
:Because this can be customized easly and I will accept as many PRs as I need to make this a great package

What does it look like by default?

Sidebar Closed 📕	Sidebar Open 📖

The CSS can be overriden with ease, This is one of the big points I will address next!
There is much work to be done on the style to make it clean and concise. Feel free to start a new PR!

Requirements

📦 Installation

run: npm install --save ngx-minisidebar

Include the module:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { RouterModule, Routes } from '@angular/router'; // <-- required RouterModule
import { NgxMinisidebarModule } from 'ngx-minisidebar'; // <-- Add Ngx mini Sidebar

@NgModule({
  imports: [
    BrowserModule,
    NgxMinisidebarModule, // <-- Add Ngx mini Sidebar
    RouterModule.forRoot([]) // <-- required RouterModule
  ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Add the style to your style.scss @import '~ngx-minisidebar/styles/ngx-minisidebar.style.scss';

Add <ngx-minisidebar></ngx-minisidebar> in your Html

All Set! Also check 🔎 stackblitz for a working example