ng-simple-sidebar

An easy library to implement asidebar with a mobile mode to your Angular app.

Demo

A demo showcase app is available under the following url to click around an test the library.

https://secanis.github.io/ng-simple-sidebar/

Installation and Setup

To install this library, run (package on npmjs.com):

npm install ng-simple-sidebar --save

and then from your angular AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library
import { NgSimpleSidebarModule } from 'ng-simple-sidebar';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,

        // Specify your library as an import
        NgSimpleSidebarModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Once your library is imported, you can use it in your angular application:

<!-- You can now use your library component in app.component.html -->
<div class="content-wrapper">
    <lib-ng-simple-sidebar></lib-ng-simple-sidebar>
    <div class="content">
        <router-outlet></router-outlet>
    </div>
</div>

CSS for the basic structure

html, body {
    margin: 0;
    padding: 0;
}

.content-wrapper {
    display: flex;
    flex-wrap: nowrap;
}

.content {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 20px;
}

And you can set the options from your application:

import { Component, OnInit } from '@angular/core';
// you can import all required interfaces, used by the simple sidebar
import { NgSimpleSidebarService, SimpleSidebarPosition, SimpleSidebarItem } from 'ng-simple-sidebar';

export class AppComponent implements OnInit {
    constructor(private ngSimpleSidebarService: NgSimpleSidebarService) {}

    ngOnInit() {
        this.sidebarItems: SimpleSidebarItem[] = [
            {
                name: 'Welcome',
                icon: 'las la-home',
                routerLink: ['/welcome'],
                position: SimpleSidebarPosition.top
            },
            {
                name: 'About',
                icon: 'las la-address-book',
                routerLink: ['/about'],
                position: SimpleSidebarPosition.top
            },
            {
                name: 'secanis.ch',
                icon: 'las la-external-link-alt',
                url: 'https://secanis.ch',
                target: '_blank',
                position: SimpleSidebarPosition.bottom
            }
        ];
        // required, configure items
        this.ngSimpleSidebarService.addItems(this.sidebarItems);

        // required, configure icons
        this.ngSimpleSidebarService.configure({
            openIcon: 'las la-bars',
            closeIcon: 'las la-times',
        });

        // optional, configuration and set states
         this.ngSimpleSidebarService.open();
         this.ngSimpleSidebarService.close();

        // optional, access states
        sidebarConfig$ = this.ngSimpleSidebarService.getConfiguration();
        isOpen$ = this.ngSimpleSidebarService.isOpen();
        getTopsideItems$ = this.ngSimpleSidebarService.getTopsideItems();
        getBotsideItems$ = this.ngSimpleSidebarService.getBotsideItems();
    }
}

Development

To generate prod builds:

npm run build:lib
npm run build:showcase

To build the demo application incl. the lib:

npm run build:watch		// start development server for the library
npm run start			// start demo showcase application

After that, you can visit the demo application under http://localhost:4200.

License

MIT © secanis.ch