Skip to content

Instantly share code, notes, and snippets.

@Abhinay-g
Created August 26, 2019 18:00
Show Gist options
  • Select an option

  • Save Abhinay-g/51a911895b9ac044ae9259440fca8bbc to your computer and use it in GitHub Desktop.

Select an option

Save Abhinay-g/51a911895b9ac044ae9259440fca8bbc to your computer and use it in GitHub Desktop.
temp
<!-- <router-outlet></router-outlet> -->
<div >
<div >
<mat-toolbar color="primary" class="example-hSeader">
<button mat-icon-button >
<mat-icon>menu</mat-icon>
</button>
<h1>Application Portal</h1>
</mat-toolbar>
</div>
<div>
<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav mode="side" opened class="example-sidenav">
<mat-nav-list>
<a mat-list-item routerLink="/login">Login</a>
<a mat-list-item routerLink="/loan">SignUp</a>
<a mat-list-item routerLink="/apply">Apply</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<div class="box">
<div class="row content">
<router-outlet></router-outlet>
</div>
<div class="row footer">
<mat-toolbar color="primary" class="example-hSeader">
<button mat-icon-button >
<mat-icon>menu</mat-icon>
</button>
<h1>Application Portal</h1>
</mat-toolbar>
</div>
</div>
</mat-sidenav-content>
</mat-sidenav-container>
</div>
</div>
=================================================
html,
body {
height: 100%;
margin: 0
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment