From 669c724e3ac3930f71cac109fd67899a4ea98208 Mon Sep 17 00:00:00 2001
From: Willem Dantuma <willem.dantuma@dobs.nl>
Date: Wed, 27 Jan 2021 10:33:01 +0100
Subject: [PATCH] Fix styling app and user menu on mobile device

---
 .../app-menu/app-menu.component.scss          | 31 ++++++++++++++++---
 .../user-menu/user-menu.component.scss        | 29 ++++++++++++++---
 src/app/app-routing.module.ts                 |  5 +++
 3 files changed, 56 insertions(+), 9 deletions(-)

diff --git a/projects/common/src/fm/components/app-menu/app-menu.component.scss b/projects/common/src/fm/components/app-menu/app-menu.component.scss
index d750974..ac7d7c3 100644
--- a/projects/common/src/fm/components/app-menu/app-menu.component.scss
+++ b/projects/common/src/fm/components/app-menu/app-menu.component.scss
@@ -14,16 +14,22 @@ div.menu-button > span {
 }
 
 .menu {
-    max-height: 100vh;
+    max-height: calc( 100vh - 4rem);
     //transition: max-height 0.2s;
     overflow: hidden;
     box-shadow: 0 0 20px rgba(0,0,0,.3);
-    position: absolute;
-    top: 3rem;
-    right:0;
+    position: fixed;
+    top: 3.4rem;
+    right:0.5rem;
+    left:0.5rem;
     background-color: #fff;
     border-radius: 0.25rem;
     padding: 0.5rem;
+    z-index: 3;
+}
+
+:host-context(.fullscreen)  .menu  {
+    top:4em;
 }
 
 .card {      
@@ -45,4 +51,19 @@ div.menu-button > span {
 
 .menu-button.hidden {
     overflow: hidden;
-}
\ No newline at end of file
+}
+
+
+@media screen and (min-width: 44rem)  {
+    .menu {
+        position: absolute;
+        top: 3rem;
+        right:0;
+        left: unset;
+        max-width: 30em;
+    }
+
+    :host-context(.fullscreen)  .menu  {
+        top: 3rem;
+    }
+}    
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.scss b/projects/common/src/fm/components/user-menu/user-menu.component.scss
index 69e3945..481addf 100644
--- a/projects/common/src/fm/components/user-menu/user-menu.component.scss
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.scss
@@ -18,14 +18,21 @@ div.menu-button > span {
     //transition: max-height 0.2s;
     overflow: hidden;
     box-shadow: 0 0 20px rgba(0,0,0,.3);
-    position: absolute;
-    top: 3rem;
-    right:0;
+    position: fixed;
+    top: 3.4rem;
+    right:0.5rem;
+    left:0.5rem;
     background-color: #fff;
     border-radius: 0.25rem;
     padding: 0.5rem;
+    z-index: 3;
 }
 
+:host-context(.fullscreen)  .menu  {
+    top:4em;
+}
+
+
 .card {      
     padding:0.5rem;
     min-width: 10rem;          
@@ -52,4 +59,18 @@ div.menu-button > span {
 
 .menu-button.hidden {
     overflow: hidden;
-}
\ No newline at end of file
+}
+
+@media screen and (min-width: 44rem)  {
+    .menu {
+        position: absolute;
+        top: 3rem;
+        right:0;
+        left: unset;
+        max-width: 30em;
+    }
+
+    :host-context(.fullscreen)  .menu  {
+        top: 3rem;
+    }
+}  
\ No newline at end of file
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c0c1d20..71e843c 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -28,6 +28,11 @@ const routes = [
     component: LogoComponent,
     outlet: 'header-logo'
   },
+  {
+    path: '',
+    component: TestComponent,
+    outlet: 'app-menu'
+  },
   {
     path: '',
     component: LogoComponent,