Mobile version: menu full width and autoclosed

3 files changed, 16 insertions, 59 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;
-        }
-      }
-    }
-  }
-}
diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 33d7ce0a5..82c4bca74 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -361,9 +361,9 @@ table {
 }
 
 // On small screen, menu is absolute
-@media screen and (max-width: 800px) {
+@media screen and (max-width: 600px) {
   .title-menu-left {
-    width: 150px !important;
+    width: 100% !important;
     position: absolute !important;
     z-index: 10000;
   }
@@ -387,4 +387,8 @@ table {
       }
     }
   }
+
+  bs-dropdown-container {
+    z-index: 10000;
+  }
 }