Mobile version: menu full width and autoclosed

2 files changed, 10 insertions, 57 deletions

diff --git a/client/src/app/app.component.ts b/client/src/app/app.component.ts
index ef8597203..ba52c2102 100644
--- a/client/src/app/app.component.ts
+++ b/client/src/app/app.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core'
-import { Router } from '@angular/router'
+import { NavigationEnd, Router } from '@angular/router'
 import { AuthService, ServerService } from '@app/core'
 
 @Component({
@@ -48,6 +48,15 @@ export class AppComponent implements OnInit {
     if (window.innerWidth < 600) {
       this.isMenuDisplayed = false
     }
+
+    this.router.events.subscribe(
+      e => {
+        // User clicked on a link in the menu, change the page
+        if (e instanceof NavigationEnd && window.innerWidth < 600) {
+          this.isMenuDisplayed = false
+        }
+      }
+    )
   }
 
   toggleMenu () {
diff --git a/client/src/app/menu/menu.component.scss b/client/src/app/menu/menu.component.scss
index 297fda84d..4714a9e87 100644
--- a/client/src/app/menu/menu.component.scss
+++ b/client/src/app/menu/menu.component.scss
@@ -136,59 +136,3 @@ menu {
     }
   }
 }
-
-@media screen and (max-width: 800px) {
-  menu {
-    .logged-in-block {
-      padding-left: 10px;
-
-      img {
-        display: none;
-      }
-
-      .logged-in-info {
-        .logged-in-username {
-          font-size: 14px;
-        }
-
-        .logged-in-email {
-          font-size: 11px;
-          max-width: 120px;
-        }
-      }
-
-      .logged-in-more {
-        margin-right: 5px;
-
-        .login-button, .create-account-button {
-          font-weight: $font-semibold;
-          font-size: 15px;
-          height: $button-height;
-          line-height: $button-height;
-          width: 190px;
-        }
-      }
-    }
-
-    .button-block {
-      margin: 20px 10px 25px 10px;
-
-      .login-button, .create-account-button {
-        font-size: 13px;
-      }
-    }
-
-    .panel-block {
-      margin-bottom: 30px;
-      margin-left: 10px;
-
-      a {
-        font-size: 14px;
-
-        .icon {
-          margin-right: 10px;
-        }
-      }
-    }
-  }
-}