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
- :angular router - v9.x
- :tslib - ^1.10.0,
π¦ 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
π¨ Development
In order to make development easier, I have included Storybook into the package start by:
- Forking the project
- Running
npm i
- Running
npm run storybook
- Make updates as needed in the directory:
projects/ngx-minisidebar
- Commit your changes, and do a PR back to here.
π£ Further help
Post in the Issues, and I am happy to help and if you have fixes I would be more than happy to pull them in!