Angular 2 Side Nav Bar

app.component.html

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

Popular posts from this blog

Can a derived class reference contain base class object.

1)Can a derived class reference contain base class object. using System; public class Base         {         public Base()         {         Console.WriteLine("I am from the Base Class Constructor");         }         public void  Invert()         {         Console.WriteLine("I am an invert function and I belong to Base");         }         } public class Derived:Base         {         public Derived()         {         Console.WriteLine("I am from the derived class constructor");   ...
Read more

Authentication and Authorization in Web API -Part1

Image
The Authentication technique used mainly by token based with OWIN, Step was to register a user , We created a appliction form to submit the user credentials to the WEB API Post Mehtod and saved in the database . We have built  a repository class which interacts with the database and gives the required result-set when requested for , We have also introduced a Business Layer which handles the business logics and acts as  model for the controller . The implementations of the Authentication and Authorization is done from this site . http://bitoftech.net/2014/06/01/token-based-authentication-asp-net-web-api-2-owin-asp-net-identity/ The Controller Class using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Web.Http; using WebApiDemo.Models; namespace WebApiDemo.Controllers {     public class EmployeeController : ApiController     {   [Authorize]        ...
Read more

Angular Js Practice Day1

Custom Directives Directive are of various types : Componenets - Containes its own HTML elements , Decorators - Enhances functionality of existing cutomers ,Templating - Which manupulate the DOM elements and have its own templating.A component oriented directivs return html  in the form of template Directive with different html template ---------------------------------------------------------------------------------------------------------------------- html <div ng-controller="CustomDirectivesController2">             <h2> Customer Directive2 </h2>             <div>                 <input type="text" ng-model="search">                 <button ng-click="getTheEmployee()">Search</button>                             </d...
Read more