Neural Processing Mechanisms

    ng-simple-sidebar
    TypeScript icon, indicating that this package has built-in type declarations

    4.3.4 • Public • Published

    ng-simple-sidebar

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

    CircleCInpm versiontypescript typesnpm license

    NPM

    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

    Install

    npm i ng-simple-sidebar

    DownloadsWeekly Downloads

    66

    Version

    4.3.4

    License

    MIT

    Unpacked Size

    174 kB

    Total Files

    27

    Last publish

    Collaborators

    • matthias_baldi