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.