From eda3bf2688670d6917acf465492cdc646edf87c2 Mon Sep 17 00:00:00 2001
From: Dennis Boldt <info@dennis-boldt.de>
Date: Sun, 26 Mar 2023 19:09:29 +0200
Subject: [PATCH] Make menu stackable on mobile

---
 frontend/src/App.module.less                  | 9 +++++++++
 frontend/src/App.tsx                          | 2 +-
 frontend/src/pages/MapPage/styles.module.less | 5 ++++-
 frontend/src/styles.less                      | 1 +
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/App.module.less b/frontend/src/App.module.less
index 5c1d07f..98c5a3b 100644
--- a/frontend/src/App.module.less
+++ b/frontend/src/App.module.less
@@ -120,6 +120,15 @@
   }
 }
 
+@media @mobile {
+  .menu.menu {
+    > :global(.ui.container) {
+      height: @menuHeightMobile;
+      align-items: stretch;
+    }
+  }
+}
+
 .banner {
   padding: 8px;
   z-index: 100;
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index c3d7cfd..96ad14f 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -95,7 +95,7 @@ const App = connect((state) => ({ login: state.login }))(function App({
         <title>OpenBikeSensor Portal</title>
       </Helmet>
       {config?.banner && <Banner {...config.banner} />}
-      <Menu className={styles.menu}>
+      <Menu className={styles.menu} stackable>
         <Container>
           <Link
             to="/"
diff --git a/frontend/src/pages/MapPage/styles.module.less b/frontend/src/pages/MapPage/styles.module.less
index dc3fa13..6d18337 100644
--- a/frontend/src/pages/MapPage/styles.module.less
+++ b/frontend/src/pages/MapPage/styles.module.less
@@ -48,7 +48,10 @@
 @media @mobile {
   .mapContainer {
     height: auto;
-    min-height: calc(100vh - @menuHeight);
+    min-height: calc(100vh - @menuHeightMobile);
+    &.hasBanner {
+      height: calc(100vh - @menuHeightMobile - 50px);
+    }
     flex-direction: column;
   }
 
diff --git a/frontend/src/styles.less b/frontend/src/styles.less
index 33c53cf..1e66c75 100644
--- a/frontend/src/styles.less
+++ b/frontend/src/styles.less
@@ -10,6 +10,7 @@
 @borderColor: #e0e0e0;
 
 @menuHeight: 50px;
+@menuHeightMobile: 220px;
 
 @mobile: ~'screen and (max-width: 767px)';
 @desktop: ~'screen and (min-width: 768px)';