OpenSlides/client/src/app/site/site.component.html
Sean Engelhardt 30ac9c8e36 autoupdate, permissions, operator, directive
-overworked login and logout
-new directive 'appOsPerms'
(former os-perms)
-appOsPerms compares with groups in Operator
-login observes operator for user-information
(also serves as example on how to user observables and subjects)
-operator observes datastore for groups
(so the  operators knows it's groups by creation or directly after an
autoupdate)
2018-08-15 10:19:46 +02:00

77 lines
3.1 KiB
HTML

<mat-sidenav-container autosize>
<mat-sidenav #sideNav [mode]="isMobile ? 'push' : 'side'" [opened]='!isMobile' disableClose='!isMobile'>
<mat-toolbar class='nav-toolbar' color='primary'>
<!-- logo -->
<mat-toolbar-row>
<img src='/assets/img/openslides-logo-dark.png' alt='OpenSlides-logo'>
</mat-toolbar-row>
</mat-toolbar>
<!-- User Menu -->
<mat-expansion-panel>
<mat-expansion-panel-header>
<!-- Get the username from operator -->
{{username}}
</mat-expansion-panel-header>
<mat-action-row>
<button (click)='logOutButton()' mat-button>Logout</button>
</mat-action-row>
</mat-expansion-panel>
<!-- navigation -->
<mat-nav-list>
<a mat-list-item routerLink='/' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
<fa-icon icon='home'></fa-icon>
<span translate>Home</span>
</a>
<a mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
<fa-icon icon='calendar'></fa-icon>
<span translate>Agenda</span>
</a>
<a mat-list-item routerLink='/motions' routerLinkActive='active' (click)='isMobile ? sideNav.toggle() : null'>
<fa-icon icon='file-alt'></fa-icon>
<span translate>Motions</span>
</a>
</mat-nav-list>
</mat-sidenav>
<!-- the first toolbar row is (still) a global element
the second one shall be handled by the apps -->
<mat-toolbar color='primary'>
<!-- show/hide menu button -->
<!-- <button mat-icon-button (click)='sideNav.toggle()'> -->
<button mat-icon-button *ngIf="isMobile" (click)='sideNav.toggle()'>
<fa-icon icon='bars'></fa-icon>
</button>
<!-- glob search and generic menu on the right -->
<span class='spacer'></span>
<button mat-icon-button (click)='sideNav.toggle()'>
<fa-icon icon='search'></fa-icon>
</button>
<button mat-icon-button (click)='sideNav.toggle()'>
<fa-icon icon='ellipsis-v'></fa-icon>
</button>
<button mat-icon-button [matMenuTriggerFor]="languageMenu">
<fa-icon icon='language'></fa-icon>
</button>
<!-- TODO: Could use translate.getLangs() to fetch available languages-->
<mat-menu #languageMenu="matMenu">
<button mat-menu-item (click)='selectLang("en")' translate>English</button>
<button mat-menu-item (click)='selectLang("de")' translate>German</button>
<button mat-menu-item (click)='selectLang("fr")' translate>French</button>
</mat-menu>
</mat-toolbar>
<!-- continue with <mat-toolbar> in the app-->
<router-outlet></router-outlet>
<!-- the global projector button -->
<button class='projector-button' mat-fab>
<fa-icon icon='video'></fa-icon>
</button>
</mat-sidenav-container>