OpenSlides/client/src/app/site/site.component.html
FinnStutzenstein be9f98cfd0 App initialization
Used for internal apps as well as for plugins. The pluginpart is
currently missing, in fact that the main OpenSlides part is more
important. Apps can give their models and mainmenu entries.

Routes are not enabled, because the routes have to be static for webpack
to build the bundles. If we want to keep lazy loading, I see no
possibility to encapsulate the routes from the site-routing module.
2018-09-28 15:03:04 +02:00

91 lines
4.0 KiB
HTML

<mat-sidenav-container autosize class='main-container'>
<mat-sidenav #sideNav [mode]="vp.isMobile ? 'push' : 'side'" [opened]='!vp.isMobile' disableClose='!vp.isMobile' class="side-panel">
<mat-toolbar class='nav-toolbar'>
<!-- logo -->
<mat-toolbar-row class='os-logo-container'>
</mat-toolbar-row>
</mat-toolbar>
<!-- User Menu -->
<mat-expansion-panel class='user-menu mat-elevation-z0'>
<mat-expansion-panel-header>
<!-- Get the username from operator -->
{{username}}
</mat-expansion-panel-header>
<mat-nav-list>
<a mat-list-item [matMenuTriggerFor]="languageMenu">
<fa-icon icon='globe-americas'></fa-icon>
<span> {{getLangName(this.translate.currentLang)}} </span>
</a>
<a *ngIf="isLoggedIn" (click)='editProfile()' mat-list-item>
<fa-icon icon='user-cog'></fa-icon>
<span translate>Edit Profile</span>
</a>
<a *ngIf="isLoggedIn" (click)='changePassword()' mat-list-item>
<fa-icon icon='key'></fa-icon>
<span translate>Change Password</span>
</a>
<mat-divider></mat-divider>
<a *ngIf="isLoggedIn" (click)='logout()' mat-list-item>
<fa-icon icon='sign-out-alt'></fa-icon>
<span translate>Logout</span>
</a>
<a *ngIf="!isLoggedIn" routerLink='/login' mat-list-item>
<fa-icon icon='sign-out-alt'></fa-icon>
<span translate>Login</span>
</a>
</mat-nav-list>
</mat-expansion-panel>
<!-- 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>
<!-- navigation -->
<mat-nav-list class='main-nav'>
<span *ngFor="let entry of mainMenuService.entries">
<a [@navItemAnim] *osPerms="entry.permission" mat-list-item (click)='toggleSideNav()'
[routerLink]='entry.route' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}">
<fa-icon [icon]='entry.icon'></fa-icon>
{{ entry.displayName | translate}}
</a>
</span>
<mat-divider></mat-divider>
<a [@navItemAnim] *osPerms="'core.can_see_projector'" mat-list-item routerLink='/projector' routerLinkActive='active' (click)='toggleSideNav()'>
<fa-icon icon='video'></fa-icon>
<span translate>Projector</span>
</a>
</mat-nav-list>
</mat-sidenav>
<div class="content">
<header>
<!-- 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 *ngIf="vp.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>
</mat-toolbar>
</header>
<div class="relax">
<main [@pageTransition]="o.isActivated ? o.activatedRoute : ''">
<router-outlet #o="outlet"></router-outlet>
</main>
<footer>
<os-footer></os-footer>
</footer>
</div>
</div>
</mat-sidenav-container>