OpenSlides/client/src/app/site/site.component.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'>
            <a [@navItemAnim] *appOsPerms="'core.can_see_frontpage'" mat-list-item routerLink='/' routerLinkActive='active' [routerLinkActiveOptions]="{exact: true}"
                (click)='toggleSideNav()'>
                <fa-icon icon='home'></fa-icon>
                <span translate>Home</span>
            </a>
            <a [@navItemAnim] *appOsPerms="'agenda.can_see'" mat-list-item routerLink='/agenda' routerLinkActive='active' (click)='toggleSideNav()'>
                <fa-icon icon='calendar'></fa-icon>
                <span translate>Agenda</span>
            </a>
            <a [@navItemAnim] *appOsPerms="'motions.can_see'" mat-list-item routerLink='/motions' routerLinkActive='active' (click)='toggleSideNav()'>
                <fa-icon icon='file-alt'></fa-icon>
                <span translate>Motions</span>
            </a>
            <a [@navItemAnim] *appOsPerms="'assignments.can_see'" mat-list-item routerLink='/assignments' routerLinkActive='active'
                (click)='vp.isMobile ? sideNav.toggle() : null'>
                <fa-icon icon='chart-pie'></fa-icon>
                <span translate>Assignments</span>
            </a>
            <a [@navItemAnim] *appOsPerms="'users.can_see_name'" mat-list-item routerLink='/users' routerLinkActive='active' (click)='toggleSideNav()'>
                <fa-icon icon='user'></fa-icon>
                <span translate>Participants</span>
            </a>
            <a [@navItemAnim] *appOsPerms="'mediafiles.can_see'" mat-list-item routerLink='/mediafiles' routerLinkActive='active' (click)='toggleSideNav()'>
                <fa-icon icon='paperclip'></fa-icon>
                <span translate>Files</span>
            </a>
            <a [@navItemAnim] *appOsPerms="'core.can_manage_config'" mat-list-item routerLink='/settings' routerLinkActive='active'
                (click)='toggleSideNav()'>
                <fa-icon icon='cog'></fa-icon>
                <span translate>Settings</span>
            </a>
            <mat-divider></mat-divider>
            <a [@navItemAnim] *appOsPerms="'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>


        <footer>
            <button mat-button>
                <a routerLink='/legalnotice' (click)='toggleSideNav()'>
                    <span translate>Legal Notice</span>
                </a>
            </button>
            <button mat-button>
                <a routerLink='/privacypolicy' (click)='toggleSideNav()'>
                    <span translate>Privacy Policy</span>
                </a>
            </button>
            <br>
            <span align="center">© Copyright by
                <a href='https://openslides.org/'>OpenSlides</a>
            </span>
        </footer>
    </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 *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>

    <!-- continue with <mat-toolbar> in the app-->
    <main [@pageTransition]="o.isActivated ? o.activatedRoute : ''">
        <router-outlet #o="outlet"></router-outlet>
    </main>
</mat-sidenav-container>