Nanotech Parading Mars

    ngx-minisidebar
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.16 • Public • Published

    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

    🔨 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!

    Install

    npm i ngx-minisidebar

    DownloadsWeekly Downloads

    10

    Version

    0.0.16

    License

    AGPL-3.0

    Unpacked Size

    113 kB

    Total Files

    31

    Last publish

    Collaborators

    • kevin192291