84 lines
2.5 KiB
HTML
84 lines
2.5 KiB
HTML
<mat-toolbar class="meet-toolbar" id="main-toolbar">
|
|
<button mat-icon-button aria-label="Menu icon" (click)="toggleSideMenu()" id="menu-toggle-btn">
|
|
<mat-icon>menu</mat-icon>
|
|
</button>
|
|
|
|
<img
|
|
id="app-logo"
|
|
class="toolbar-logo"
|
|
[src]="isDarkMode() ? 'assets/images/meet_dark.png' : 'assets/images/meet_light.png'"
|
|
height="46"
|
|
aria-label="OpenVidu Meet"
|
|
/>
|
|
|
|
<span class="toolbar-spacer"></span>
|
|
|
|
<!-- <button mat-icon-button aria-label="Profile" id="profile-btn">
|
|
<mat-icon>account_circle</mat-icon>
|
|
</button> -->
|
|
|
|
<button
|
|
mat-icon-button
|
|
(click)="toggleTheme()"
|
|
[matTooltip]="isDarkMode() ? 'Switch to light mode' : 'Switch to dark mode'"
|
|
aria-label="Toggle theme mode"
|
|
id="theme-toggle-btn"
|
|
>
|
|
<mat-icon>{{ isDarkMode() ? 'wb_sunny' : 'nights_stay' }}</mat-icon>
|
|
</button>
|
|
<button mat-icon-button (click)="onLogoutClicked.emit()" matTooltip="Logout" aria-label="Logout" id="logout-btn">
|
|
<mat-icon>logout</mat-icon>
|
|
</button>
|
|
</mat-toolbar>
|
|
|
|
<mat-sidenav-container autosize class="sidenav-container" id="sidenav-container">
|
|
<mat-sidenav
|
|
#sidenav
|
|
[ngClass]="isSideMenuCollapsed ? 'collapsed' : 'expanded'"
|
|
[mode]="isMobile ? 'over' : 'side'"
|
|
[opened]="isMobile ? 'false' : 'true'"
|
|
id="side-navigation"
|
|
>
|
|
<mat-nav-list id="nav-list">
|
|
@for (link of navLinks; track link.route) {
|
|
<ng-container>
|
|
<a
|
|
mat-list-item
|
|
class="menu-button"
|
|
[routerLink]="link.route"
|
|
routerLinkActive="active-nav-item"
|
|
[routerLinkActiveOptions]="{ exact: false }"
|
|
(click)="link.clickHandler ? link.clickHandler() : null"
|
|
[matTooltip]="isSideMenuCollapsed ? link.label : ''"
|
|
[matTooltipPosition]="'right'"
|
|
[matTooltipClass]="'nav-tooltip'"
|
|
[matTooltipDisabled]="!isSideMenuCollapsed"
|
|
[id]="'nav-link-' + link.route!.replace('/', '')"
|
|
>
|
|
<span class="entry" [ngClass]="isSideMenuCollapsed ? 'centeredEntry' : 'entry'">
|
|
<mat-icon [ngClass]="link.iconClass">{{ link.icon }}</mat-icon>
|
|
@if (!isSideMenuCollapsed) {
|
|
{{ link.label }}
|
|
}
|
|
</span>
|
|
</a>
|
|
</ng-container>
|
|
}
|
|
</mat-nav-list>
|
|
|
|
@if (!isSideMenuCollapsed) {
|
|
<div class="separator" id="nav-separator"></div>
|
|
<div class="version" id="version-info">
|
|
<p>{{ version }}</p>
|
|
</div>
|
|
}
|
|
</mat-sidenav>
|
|
|
|
<!-- Main content -->
|
|
<mat-sidenav-content id="main-content">
|
|
<div class="page-content" id="page-content">
|
|
<router-outlet></router-outlet>
|
|
</div>
|
|
</mat-sidenav-content>
|
|
</mat-sidenav-container>
|