Creating the sidebar with Angular and Bootstrap navbar
The ng-bs-navbar is an Angular directive that can be used for creating the navbar based on Bootstrap, as well as it includes a handy sidebar.
You may also place the icons from the materialIcon with the menu items.
How to setup this Angular directive?
You need to setup the routes with navbar in the JS code where you may also set the icons. See the navbar.js and ng-bs-navbar.js files that download with the zipped file.
Include the dependency files:
<link rel=”stylesheet” href=”bower_components/ng-bs-navbar/dist/ng-bs-navbar.css” type=”text/css” />
<link rel=”stylesheet” href=”bower_components/ng-bs-navbar/dist/ng-bs-navbar-theme-dark.css” type=”text/css” />
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”>
See the demo and code below for learning how to use the code.
A demo with dark theme
In this demo, the dark theme is used for the menus. You can see the position heading with two buttons. Upon pressing the top, the position of the left menu will change to the top. Similarly, you may use the Condensed or Full view of the menu by pressing the respective button:
A demo of light color theme
For the above demo, the ng-bs-navbar-theme-dark.css file was used for creating the darkish theme. You may customize that file or add your own style to match the theme of left or top navigation bar with the rest of the website design.
For this demo, the ng-bs-navbar-theme-dark.css is removed and the light color scheme is used as follows:
Learn more about this directive here.