[Dashboard]: Reworked sidebar menu auto expanding
[src/xds/xds-agent.git] / webapp / src / app / @theme / layouts / xds / xds.layout.html
1 <nb-layout [center]="layout.id === 'center-column'" windowMode>
2
3   <nb-layout-header fixed>
4     <ngx-header [position]="sidebar.id === 'left' ? 'normal': 'inverse'"></ngx-header>
5   </nb-layout-header>
6
7   <nb-sidebar class="menu-sidebar" tag="menu-sidebar" responsive [right]="sidebar.id === 'right'" state="compacted"
8     (mouseenter)="onMouseEnter($event)" (mouseleave)="onMouseLeave($event)">
9
10     <nb-sidebar-header (click)="pinSidebar()">
11       <!-- left sidebar -->
12       <nb-actions *ngIf="sidebar.id === 'left'" size="small" class="header-container right">
13         <nb-action id="pin-sidebar" [icon]="(!sidebarPinned || sidebarCompact) ? 'fa fa-angle-double-right':'fa fa-angle-double-left'"
14         [ngbTooltip]="sidebarPinned ? 'Undock the sidebar so it is hidden when no being focused':'Dock the sidebar so you can always see it'" placement="bottom">
15         </nb-action>
16       </nb-actions>
17       <!-- right sidebar -->
18       <nb-actions *ngIf="sidebar.id === 'right'" size="small" class="header-container left">
19         <nb-action id="pin-sidebar" [icon]="(!sidebarPinned || sidebarCompact) ? 'fa fa-angle-double-left':'fa fa-angle-double-right'"
20         [ngbTooltip]="sidebarPinned ? 'Undock the sidebar so it is hidden when no being focused':'Dock the sidebar so you can always see it'" placement="bottom">
21         </nb-action>
22       </nb-actions>
23     </nb-sidebar-header>
24
25     <ng-content select="nb-menu"></ng-content>
26
27     <nb-sidebar-footer>
28     </nb-sidebar-footer>
29   </nb-sidebar>
30
31   <nb-layout-column class="main-content">
32     <ng-content select="router-outlet"></ng-content>
33   </nb-layout-column>
34
35   <nb-layout-column left class="small" *ngIf="layout.id === 'two-column' || layout.id === 'three-column'">
36     <nb-menu [items]="subMenu"></nb-menu>
37   </nb-layout-column>
38
39   <nb-layout-column right class="small" *ngIf="layout.id === 'three-column'">
40     <nb-menu [items]="subMenu"></nb-menu>
41   </nb-layout-column>
42
43   <nb-layout-footer fixed>
44     <ngx-footer></ngx-footer>
45   </nb-layout-footer>
46
47   <nb-sidebar class="settings-sidebar" tag="settings-sidebar" state="collapsed" fixed [right]="sidebar.id !== 'right'">
48     <ngx-theme-settings></ngx-theme-settings>
49   </nb-sidebar>
50 </nb-layout>