Angular 2 Side Nav Bar
app.component.html
app.component.css
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'app';
isExpanded = true;
toggleFunction(): void {
console.log('I was clicked');
if (this.isExpanded ) {
document.getElementById('sidebar-wrapper').style.width = '0px';
document.getElementById('page-content-wrapper').style.marginLeft = '0px';
this.isExpanded = false;
} else {
document.getElementById('sidebar-wrapper').style.width = '250px';
document.getElementById('page-content-wrapper').style.marginLeft = '250px';
document.getElementById('page-content-wrapper').style.overflowX = 'auto';
this.isExpanded = true;
}
}
}
app.component.css
#wrapper {
width:100%;
transition: all 0.4s ease 0s;
}
//top nav bar //
.navbar {
background-color: #3b5998 ;
overflow: hidden;
height:50px;
}
//top nav bar styling for hamberger icon
.navbar a{
float: left;
text-align: center;
padding: 14px 16px;
}
// side navigation styling
#sidebar-wrapper {
top: 50px;
width: 250px;
background: #26263F;
position: fixed;
height: 100%;
overflow-y: auto;
overflow-x: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#page-content-wrapper {
padding-top: 70px;
transition: all 0.4s ease 0s;
margin-left: 250px;
}
//side bar navigation
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
//side bar navigation
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
//side bar navigation
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
padding: 5px 10px 5px 10px;
font-size: 16px;
transition: 0.4s;
}
// li.active {
// color: #fff;
// background: rgba(255,255,255,0.2);
// text-decoration: none;
// }
// li {
// padding: 2px 5px 2px 5px;
// }
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#transparentButton{
background-color: Transparent;
border: none;
cursor:pointer;
overflow:hidden;
outline: none;
}
.dropdown-container{
display: none;
padding-left: 8px;
}
@media (max-width:600px) {
#wrapper {
padding-left: 0;
width:100%;
}
#sidebar-wrapper {
width: 150px;
}
#wrapper.active {
position: relative;
}
#wrapper.active #sidebar-wrapper {
width: 120px;
transition: all 0.4s ease 0s;
}
}
app.component.ts
<div id="wrapper">
<!-- topbar -->
<nav class="navbar navbar-fixed-top" role="navigation">
<span class="slide">
<button id="transparentButton" (click)="toggleFunction()"><i class="glyphicon glyphicon-menu-hamburger" style="color:#fff; font-size:24px"></i></button>
<!-- <a href="#" (click)="toggleFunction()">
<i class="glyphicon glyphicon-menu-hamburger" style="color:#fff; font-size:24px"></i>
</a> -->
</span>
</nav>
<!-- sidebar -->
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li >
<a data-toggle="collapse" data-target="#toggleDropDown" class="collapsed" >School Management <i class="glyphicon glyphicon-chevron-down"></i></a>
<!-- <div class="collapse" id="toggleDemo"> -->
<ul class="collapse" id="toggleDropDown" data-parent="#sidebar-wrapper">
<li><a href="/school-mgmt" >Route Management</a></li>
<li><a href="/route-allocation">Route Allocation</a></li>
<li><a href="/upload-details">Student Upload</a></li>
</ul>
<!-- </div> -->
</li>
<li><a href="/student-mgmt">Student Management</a></li>
<li><a href="/vehicle-mgmt">Vehicle Management</a></li>
<li><a href="/driver-mgmt">Driver Management</a></li>
</ul>
</div>
<!-- pagecontent -->
<div id="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-lg-12">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
</div>
Comments
Post a Comment