mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-04-27 02:23:10 +00:00
110 lines
4.1 KiB
HTML
110 lines
4.1 KiB
HTML
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
|
|
|
<!-- TOOLBAR: Above fixed -->
|
|
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-fixed'">
|
|
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
|
|
</ng-container>
|
|
<!-- / TOOLBAR: Above fixed -->
|
|
|
|
<div id="container-1" class="container" fusePerfectScrollbar
|
|
[fusePerfectScrollbarOptions]="{suppressScrollX: true, updateOnRouteChange : true}">
|
|
|
|
<!-- TOOLBAR: Above static -->
|
|
<ng-container *ngIf="fuseConfig.layout.toolbar.position === 'above-static'">
|
|
<ng-container *ngTemplateOutlet="toolbar"></ng-container>
|
|
</ng-container>
|
|
<!-- / TOOLBAR: Above static -->
|
|
|
|
<div id="container-2" class="container">
|
|
|
|
<!-- NAVBAR: Left -->
|
|
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'left'">
|
|
<ng-container *ngTemplateOutlet="leftNavbar"></ng-container>
|
|
</ng-container>
|
|
<!-- / NAVBAR: Left -->
|
|
|
|
<!-- CONTENT -->
|
|
<content
|
|
[ngClass]="{'ml-32':fuseConfig.layout.navbar.position === 'left', 'mr-32':fuseConfig.layout.navbar.position === 'right'}">
|
|
</content>
|
|
<!-- / CONTENT -->
|
|
|
|
<!-- NAVBAR: Right -->
|
|
<ng-container *ngIf="fuseConfig.layout.navbar.position === 'right'">
|
|
<ng-container *ngTemplateOutlet="rightNavbar"></ng-container>
|
|
</ng-container>
|
|
<!-- / NAVBAR: Right -->
|
|
|
|
</div>
|
|
|
|
<!-- FOOTER: Above static -->
|
|
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above-static'">
|
|
<ng-container *ngTemplateOutlet="footer"></ng-container>
|
|
</ng-container>
|
|
<!-- FOOTER: Above static -->
|
|
|
|
</div>
|
|
|
|
<!-- FOOTER: Above fixed -->
|
|
<ng-container *ngIf="fuseConfig.layout.footer.position === 'above-fixed'">
|
|
<ng-container *ngTemplateOutlet="footer"></ng-container>
|
|
</ng-container>
|
|
<!-- FOOTER: Above fixed -->
|
|
|
|
</div>
|
|
|
|
<!-- CHAT PANEL -->
|
|
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
|
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
|
lockedOpen="gt-md">
|
|
<chat-panel></chat-panel>
|
|
</fuse-sidebar>
|
|
<!-- / CHAT PANEL -->
|
|
|
|
<!-- QUICK PANEL -->
|
|
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
|
<quick-panel></quick-panel>
|
|
</fuse-sidebar>
|
|
<!-- / QUICK PANEL -->
|
|
|
|
<!-- ----------------------------------------------------------------------------------------------------- -->
|
|
<!-- @ PARTIALS
|
|
<!-- ----------------------------------------------------------------------------------------------------- -->
|
|
|
|
<!-- TOOLBAR -->
|
|
<ng-template #toolbar>
|
|
<toolbar *ngIf="!fuseConfig.layout.toolbar.hidden"
|
|
[ngClass]="[fuseConfig.layout.toolbar.position, fuseConfig.layout.toolbar.background]"></toolbar>
|
|
</ng-template>
|
|
<!-- / TOOLBAR -->
|
|
|
|
<!-- FOOTER -->
|
|
<ng-template #footer>
|
|
<footer *ngIf="!fuseConfig.layout.footer.hidden"
|
|
[ngClass]="[fuseConfig.layout.footer.position, fuseConfig.layout.footer.background]"></footer>
|
|
</ng-template>
|
|
<!-- / FOOTER -->
|
|
|
|
<!-- LEFT NAVBAR -->
|
|
<ng-template #leftNavbar>
|
|
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
|
|
[folded]="fuseConfig.layout.navbar.folded"
|
|
lockedOpen="gt-md"
|
|
*ngIf="!fuseConfig.layout.navbar.hidden">
|
|
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
|
class="left-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
|
</fuse-sidebar>
|
|
</ng-template>
|
|
<!-- / LEFT NAVBAR -->
|
|
|
|
<!-- RIGHT NAVBAR -->
|
|
<ng-template #rightNavbar>
|
|
<fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
|
|
[folded]="fuseConfig.layout.navbar.folded"
|
|
lockedOpen="gt-md"
|
|
*ngIf="!fuseConfig.layout.navbar.hidden">
|
|
<navbar [variant]="fuseConfig.layout.navbar.variant"
|
|
class="right-navbar" [ngClass]="fuseConfig.layout.navbar.background"></navbar>
|
|
</fuse-sidebar>
|
|
</ng-template>
|
|
<!-- / RIGHT NAVBAR --> |