OpenSlides/client/src/app/site/site.component.html

<div class="offline-banner" *ngIf="isOffline"><mat-icon>cloud_off</mat-icon><span translate>Offline mode</span></div>
<div class="history-mode-indicator" *ngIf="OSStatus.isInHistoryMode">
    <span translate>You are using the history mode of OpenSlides. Changes will not be saved.</span>
    <span>({{ getHistoryTimestamp() }})</span>
    <a (click)="timeTravel.resumeTime()" translate>Exit</a>
</div>
<mat-sidenav-container
    #siteContainer
    class="main-container"
    (backdropClick)="toggleSideNav()"
    (touchstart)="swipe($event, 'start')"
    (touchend)="swipe($event, 'end')"
>
    <mat-sidenav
        #sideNav
        [mode]="vp.isMobile ? 'over' : 'side'"
        [opened]="!vp.isMobile"
        disableClose="!vp.isMobile"
        class="side-panel"
    >
        <div class="nav-toolbar">
            <!-- logo -->
            <a routerLink="/" (click)="toggleSideNav()">
                <os-logo class="os-logo-container" [footer]="false"></os-logo>
            </a>
        </div>

        <!-- User Menu -->
        <mat-expansion-panel class="user-menu mat-elevation-z0">
            <mat-expansion-panel-header class="username">
                <!-- Get the username from operator -->
                <span *ngIf="username">{{ username }}</span>
            </mat-expansion-panel-header>
            <mat-nav-list>
                <a mat-list-item [matMenuTriggerFor]="languageMenu">
                    <mat-icon>language</mat-icon>
                    <span>{{ getLangName() }}</span>
                </a>
                <div *ngIf="isLoggedIn">
                    <a
                        [routerLink]="operator.user ? ['/users/', operator.user.id] : []"
                        (click)="mobileAutoCloseNav()"
                        mat-list-item
                    >
                        <mat-icon>person</mat-icon>
                        <span translate>Show profile</span>
                    </a>
                    <a
                        *osPerms="'users.can_change_password'"
                        routerLink="/users/password"
                        (click)="mobileAutoCloseNav()"
                        mat-list-item
                    >
                        <mat-icon>vpn_key</mat-icon>
                        <span translate>Change password</span>
                    </a>
                    <a *ngIf="isLoggedIn" (click)="logout()" mat-list-item>
                        <mat-icon>exit_to_app</mat-icon>
                        <span translate>Logout</span>
                    </a>
                </div>
                <div *ngIf="!isLoggedIn">
                    <a routerLink="/login" mat-list-item>
                        <mat-icon>exit_to_app</mat-icon>
                        <span translate>Login</span>
                    </a>
                </div>
            </mat-nav-list>
        </mat-expansion-panel>
        <mat-menu #languageMenu="matMenu">
            <button mat-menu-item (click)="selectLang('en')">{{ getLangName('en') }}</button>
            <button mat-menu-item (click)="selectLang('de')">{{ getLangName('de') }}</button>
            <button mat-menu-item (click)="selectLang('cs')">{{ getLangName('cs') }}</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)="mobileAutoCloseNav()"
                    [routerLink]="entry.route"
                    routerLinkActive="active"
                    [routerLinkActiveOptions]="{ exact: entry.route === '/' }"
                >
                    <mat-icon>{{ entry.icon }}</mat-icon>
                    <span>{{ entry.displayName | translate }}</span>
                </a>
            </span>
            <mat-divider></mat-divider>
            <a [@navItemAnim] *ngIf="vp.isMobile" mat-list-item routerLinkActive="active" (click)="toggleSearch()">
                <mat-icon>search</mat-icon>
                <span translate>Search</span>
            </a>
            <a
                [@navItemAnim]
                mat-list-item
                routerLink="/legalnotice"
                routerLinkActive="active"
                (click)="mobileAutoCloseNav()"
            >
                <mat-icon>info</mat-icon>
                <span translate>Legal notice</span>
            </a>
            <a
                [@navItemAnim]
                mat-list-item
                routerLink="/privacypolicy"
                routerLinkActive="active"
                (click)="mobileAutoCloseNav()"
            >
                <mat-icon>security</mat-icon>
                <span translate>Privacy policy</span>
            </a>
            <a
                [@navItemAnim]
                mat-list-item
                href="https://openslides.org"
                target="_blank"
                (click)="mobileAutoCloseNav()"
            >
                <span>
                    <small><os-copyright-sign></os-copyright-sign>&nbsp;Copyright by OpenSlides</small>
                </span>
            </a>
            <div class="os-footer-logo-container">
                <os-logo [footer]="true"></os-logo>
            </div>
        </mat-nav-list>
        <!-- Toggle-button -->
        <div class="nav-toggle-button-container" *ngIf="!vp.isMobile">
            <button *ngIf="sideNav.opened" mat-raised-button (click)="toggleSideNav()" class="nav-toggle-button left">
                <mat-icon>arrow_back_ios</mat-icon>
            </button>
        </div>
    </mat-sidenav>
    <mat-sidenav-content>
        <!-- Toggle-button -->
        <div class="nav-toggle-button-container" *ngIf="!vp.isMobile">
            <button *ngIf="!sideNav.opened" mat-raised-button (click)="toggleSideNav()" class="nav-toggle-button right">
                <mat-icon>arrow_forward_ios</mat-icon>
            </button>
        </div>
        <div (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')" class="content">
            <main [@pageTransition]="o.isActivated ? o.activatedRoute : ''">
                <router-outlet #o="outlet"></router-outlet>
            </main>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

<os-global-spinner></os-global-spinner>