sys-sidemenubar v0.0.7

SysSidemenubar

sys-sidemenubar

Angular component for navbar

• Requires Angular version 9 or higher!

• Requires Bootstrap 4

Usage

1. Install sys-sidemenubar through npm package manager using the following command:

npm i sys-sidemenubar --save

2. Add SysSidemenubar into your AppModule class. app.module.ts would look like this:

  

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';
import { SysSidemenubarModule } from 'sys-sidemenubar';
@NgModule({
imports: [BrowserModule,SysSidemenubarModule ],
declarations: [AppComponent],
bootstrap: [AppComponent],
}
export class AppModule {
}

3. Include Bootstrap ,jquery,popper and font-awesome

		1.Installing using below cmd  

		` npm install bootstrap @popperjs/core font-awesome jquery --save`
 

		2.Import in angular.json like below 

		    "styles": [
		    "node_modules/bootstrap/dist/css/bootstrap.min.css",
		    "node_modules/font-awesome/css/font-awesome.css"
		    ],
		    "scripts": [
		    "node_modules/jquery/dist/jquery.min.js",
		    "node_modules/@popperjs/core/dist/umd/popper.js",
		    "node_modules/bootstrap/dist/js/bootstrap.min.js"
		    ]

4. Add the tag <sys-sidemenubar> in app.component.html

   <sys-sidemenubar menuList="data" position="'left'" icon="true" backgroundColor="'green'" itemColor="'white'">

Sample data for menuList input

data=[ 

{name:'home',submenu:[],path:'/home',iconHtml:"<img src='Picture.png' height='22' width='22'>" }, {name:'dashboard',submenu:[],path:'/dashboard'}, {name:'about',submenu:[ {name:'home',path:'/home',iconHtml:" <i class='fa fa-bar-chart'></i>"}, {name:'about',path:'/about',iconHtml:" <i class='fa fa-table'></i>"}], iconHtml:" <i class='fa fa-fw fa-compass'></i>"} ];