mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-14 04:21:37 +00:00
70 lines
2.0 KiB
HTML
70 lines
2.0 KiB
HTML
<div class="page-layout carded left-sidenav single-scroll" fusePerfectScrollbar>
|
|
|
|
<!-- TOP BACKGROUND -->
|
|
<div class="top-bg mat-accent-bg"></div>
|
|
<!-- / TOP BACKGROUND -->
|
|
|
|
<mat-sidenav-container>
|
|
|
|
<!-- SIDENAV -->
|
|
<mat-sidenav class="sidenav" align="start" opened="true" mode="side"
|
|
fuseMatSidenavHelper="carded-left-sidenav" mat-is-locked-open="gt-md">
|
|
|
|
<!-- SIDENAV HEADER -->
|
|
<div class="header p-24" ngClass="mat-accent-bg" ngClass.gt-md="white-fg">
|
|
<h2>Sidenav header</h2>
|
|
</div>
|
|
<!-- / SIDENAV HEADER -->
|
|
|
|
<!-- SIDENAV CONTENT -->
|
|
<div class="content p-24" fusePerfectScrollbar>
|
|
|
|
<fuse-demo-sidenav></fuse-demo-sidenav>
|
|
|
|
</div>
|
|
<!-- / SIDENAV CONTENT -->
|
|
|
|
</mat-sidenav>
|
|
<!-- / SIDENAV -->
|
|
|
|
<!-- CENTER -->
|
|
<div class="center">
|
|
|
|
<!-- CONTENT HEADER -->
|
|
<div class="header white-fg p-24">
|
|
<h2>Left sidenav with page scroll</h2>
|
|
</div>
|
|
<!-- / CONTENT HEADER -->
|
|
|
|
<!-- CONTENT CARD -->
|
|
<div class="content-card mat-white-bg">
|
|
|
|
<!-- CONTENT TOOLBAR -->
|
|
<div class="toolbar px-24 py-8">
|
|
<button mat-button class="mat-icon-button sidenav-toggle"
|
|
fuseMatSidenavToggler="carded-left-sidenav"
|
|
fxHide.gt-md>
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
|
|
<span>Content toolbar</span>
|
|
</div>
|
|
<!-- / CONTENT TOOLBAR -->
|
|
|
|
<!-- CONTENT -->
|
|
<div class="content p-24" fusePerfectScrollbar>
|
|
|
|
<fuse-demo-content></fuse-demo-content>
|
|
|
|
</div>
|
|
<!-- / CONTENT -->
|
|
|
|
</div>
|
|
<!-- / CONTENT CARD -->
|
|
|
|
</div>
|
|
<!-- / CENTER -->
|
|
|
|
</mat-sidenav-container>
|
|
|
|
</div> |