How to impliment a sidenav Navigation drawer with a (Mini variant)
Angular material 2 community I need your help how to make mini variant like google material design example in angular Material 2.
I try to implement this but I can't make this happen
My code so far
<!-- ===================================================================== -->
<!-- SIDENAV && SIDENAV CONTAINER -->
<!-- ===================================================================== -->
<mat-sidenav-container>
<mat-sidenav
#adminNavMenu
mode="side"
opened="true"
style="min-width:50px; background: #F3F3F3;"
class="shadow_right" autosize>
<!-- MENU LEFT -->
<app-admin-menu-left></app-admin-menu-left>
</mat-sidenav>
<mat-sidenav-container>
app-admin-menu-left.html
<mat-nav-list style="min-width:60px;">
<mat-list-item *ngFor="let page of Menus">
<a routerLink="{{page.link}}" routerLinkActive="active"
[routerLinkActiveOptions]="{exact:true}" matLine>
<mat-icon class="home_icon collapse-icon vcenter" mat-list-icon>{{page.icon}}</mat-icon>
<span *ngIf="!showFiller">
{{page.name}}
</span>
</a>
</mat-list-item>
</mat-nav-list>
<button mat-icon-button (click)="showFiller = !showFiller" mat-raised-button>
<mat-icon *ngIf="!showFiller">chevron_right</mat-icon>
<mat-icon *ngIf="showFiller">chevron_left</mat-icon>
</button>
End gives me this unexpected result
After I click to view the mini bar
As you see there is a margin 250 px on
mat-sidenav-contentbut I can't access this element.
Any help to solve this is gonna be useful.
Thanx
Answer
I have passed this problem with that solution.
Good luck.
Also, I have made a working example in Stackblitz
home.component.html
<div>
<mat-sidenav-container>
<mat-sidenav #adminNavMenu mode="side" opened="true" style="min-width:60px; background: #F3F3F3;" class="shadow_right" autosize>
<!-- MENU LEFT -->
<app-admin-menu-left></app-admin-menu-left>
</mat-sidenav>
<!-- ================================================================= -->
<!-- ************************* MAIN CONTAINER ************************ -->
<!-- ================================================================= -->
<mat-sidenav-content [@onSideNavChange]="sideNavState">
<div class="main_container" fxLayout="column" fxLayoutGap="0px" style="height:100vh;">
<!-- =============================================================== -->
<!-- Your main content -->
<!-- =============================================================== -->
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
home.component.ts
import { Component, OnInit } from '@angular/core';
import { MatSidenav } from '@angular/material';
import { trigger, state, style, transition, animate } from '@angular/animations';
import { MediatorService } from '@app-services/mediator/mediator.service';
@Component({
selector: 'app-admin-analytics',
templateUrl: './admin-analytics.component.html',
styleUrls: ['./admin-analytics.component.css'],
animations: [
trigger('onSideNavChange', [
state('close',
style({
'margin-left': '60px'
})
),
state('open',
style({
'margin-left': '250px'
})
),
transition('close => open', animate('250ms ease-in')),
transition('open => close', animate('250ms ease-in')),
]),
trigger('onPageReady', [
state('inactive',
style({
opacity: 0.4
})
),
state('active',
style({
opacity: 1
})
),
transition('inactive => active', animate('250ms ease-in')),
transition('active => inactive', animate('250ms ease-in')),
])
]
})
export class HomeComponent implements OnInit {
/**
* Get the sidenav state.
*/
sideNavState: string = this.mediator.getSideNavState;
constructor(
private mediator: MediatorService,
) { }
ngOnInit() {
// Subscribe on changes important.
this.mediator.sideNavListener.subscribe( state => {
this.sideNavState = state;
});
}
}
mediator.service.ts
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
@Injectable()
export class MediatorService {
APP_VERSION: String = 'v8.3.1.36';
// default value.
// this variable track the value between sessions.
private _sideState: any = 'open';
/** This is the mini variant solution with animations trick. */
sideNavListener: any = new Subject();
get sideNavState() {
return this._sideState;
}
setSidenavState(state) {
this._sideState = state;
}
constructor() {
this.sideNavListener.subscribe( state => {
this.setSidenavState(state);
});
}
}
menu-left.component.html
<div class="sidenav_menu_left"
[@onSideNavChange]="sideNavState"
style="width:100%; height: 100vh;"
fxLayout="column"
[style.overflow]="overflowState">
<p>Sidenav content left</p>
<!-- this can toggle the sidenav -->
<div fxFlex="100" (click)="toggleSideNav();" class="hoverble"></div>
</div>
menu-left.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { MatSidenav } from '@angular/material';
import {trigger, state, style, transition, animate, keyframes, query, group} from '@angular/animations';
// Mediator: the main service, later this service is gonna have more generic use.
import { MediatorService } from '@app-services/mediator/mediator.service';
import { delay } from 'q';
@Component({
selector: 'app-admin-menu-left',
templateUrl: './admin-menu-left.component.html',
styleUrls: ['./admin-menu-left.component.css'],
animations: [
// animate sidenave
trigger('onSideNavChange', [
state('close',
style({
width: '60px'
})
),
state('open',
style({
width: '250px'
})
),
transition('close => open', animate('250ms ease-in')),
transition('open => close', animate('250ms ease-in')),
])
]
})
export class MenuLeftComponent implements OnInit {
/**
* Get the sidenav state,
*/
sideNavState: string = this.mediator.sideNavState;
overflowState: any = 'auto';
constructor(
private mediator: MediatorService
) {
}
ngOnInit() {
this.mediator.sideNavListener.subscribe( state => {
this.sideNavState = state;
});
}
/**
* On animation done.
* @param x
*/
animationEvent(x) {
this.overflowState = 'auto';
}
/**
* Toggle the sidenave state.
*
* Hides entire sidenav onclose.
*/
setSideNavState() {
this.mediator.toggle().then( snap => {
console.log(snap);
});
}
/**
* Toggle, Open or close the sidenav.
*
* Set the sidenave state on mediator.
*/
toggleSideNav() {
switch (this.sideNavState) {
case 'close':
this.sideNavState = 'open';
this.mediator.setSideNavState(this.sideNavState);
setTimeout( () => {{
this.sideNavText = this.sideNavText === 'open' ? 'close' : 'open';
this.sideNavIcon = this.sideNavIcon === 'open' ? 'close' : 'open';
this.sideNavCopyRight = this.sideNavCopyRight === 'open' ? 'close' : 'open';
}}, 200);
break;
case 'open':
this.sideNavText = this.sideNavText === 'open' ? 'close' : 'open';
this.sideNavIcon = this.sideNavIcon === 'open' ? 'close' : 'open';
this.sideNavCopyRight = this.sideNavCopyRight === 'open' ? 'close' : 'open';
setTimeout( () => {{
this.sideNavState = this.sideNavState === 'open' ? 'close' : 'open';
this.mediator.setSideNavState(this.sideNavState);
}}, 200);
break;
default:
console.log('#6644');
break;
}
this.overflowState = 'hidden';
}
}