From 9d3410af1c53814948cf5a4d30ab711b285fee7d Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Sat, 19 Jan 2019 11:07:37 +0100
Subject: [PATCH] Fix naviagion hiding

Fixes an issue where the navigation panel was always hiding during
every navigation.

Also changes the backdrop of the navigation
---
 client/src/app/site/site.component.html | 14 +++++++-------
 client/src/app/site/site.component.ts   | 11 ++++++++++-
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html
index 261d8526c..3599889f3 100644
--- a/client/src/app/site/site.component.html
+++ b/client/src/app/site/site.component.html
@@ -5,7 +5,7 @@
 <mat-sidenav-container #siteContainer class="main-container" (backdropClick)="toggleSideNav()">
     <mat-sidenav
         #sideNav
-        [mode]="vp.isMobile ? 'push' : 'side'"
+        [mode]="vp.isMobile ? 'over' : 'side'"
         [opened]="!vp.isMobile"
         disableClose="!vp.isMobile"
         class="side-panel"
@@ -62,7 +62,7 @@
                     [@navItemAnim]
                     *osPerms="entry.permission"
                     mat-list-item
-                    (click)="toggleSideNav()"
+                    (click)="mobileAutoCloseNav()"
                     [routerLink]="entry.route"
                     routerLinkActive="active"
                     [routerLinkActiveOptions]="{ exact: entry.route === '/' }"
@@ -77,7 +77,7 @@
                 mat-list-item
                 routerLink="/projector"
                 routerLinkActive="active"
-                (click)="toggleSideNav()"
+                (click)="mobileAutoCloseNav()"
             >
                 <mat-icon>videocam</mat-icon>
                 <span translate>Projector</span>
@@ -88,7 +88,7 @@
                 mat-list-item
                 routerLink="/search"
                 routerLinkActive="active"
-                (click)="toggleSideNav()"
+                (click)="mobileAutoCloseNav()"
             >
                 <mat-icon>search</mat-icon>
                 <span translate>Search</span>
@@ -98,7 +98,7 @@
                 mat-list-item
                 routerLink="/legalnotice"
                 routerLinkActive="active"
-                (click)="toggleSideNav()"
+                (click)="mobileAutoCloseNav()"
             >
                 <mat-icon>info</mat-icon>
                 <span translate>Legal notice</span>
@@ -108,7 +108,7 @@
                 mat-list-item
                 routerLink="/privacypolicy"
                 routerLinkActive="active"
-                (click)="toggleSideNav()"
+                (click)="mobileAutoCloseNav()"
             >
                 <mat-icon>security</mat-icon>
                 <span translate>Privacy policy</span>
@@ -118,7 +118,7 @@
                 mat-list-item
                 href="https://openslides.org"
                 target="_blank"
-                (click)="toggleSideNav()"
+                (click)="mobileAutoCloseNav()"
             >
                 <span><small><os-copyright-sign></os-copyright-sign>&nbsp;Copyright by OpenSlides</small></span>
             </a>
diff --git a/client/src/app/site/site.component.ts b/client/src/app/site/site.component.ts
index 89b14aed8..566f72373 100644
--- a/client/src/app/site/site.component.ts
+++ b/client/src/app/site/site.component.ts
@@ -114,12 +114,21 @@ export class SiteComponent extends BaseComponent implements OnInit {
     }
 
     /**
-     * Closes the sidenav
+     * Toggles the side nav
      */
     public toggleSideNav(): void {
         this.sideNav.toggle();
     }
 
+    /**
+     * Automatically close the navigation in while navigating in mobile mode
+     */
+    public mobileAutoCloseNav(): void {
+        if (this.vp.isMobile) {
+            this.sideNav.close();
+        }
+    }
+
     /**
      * Let the user change the language
      * @param lang the desired language (en, de, cs, ...)