From 120465b46aa408259bd5e84fd594af881430a8ed Mon Sep 17 00:00:00 2001
From: Kevin Veen-Birkenbach <kevin@veen.world>
Date: Wed, 15 Jan 2025 13:47:51 +0100
Subject: [PATCH] Optimized for mobile

---
 app/static/css/navigation.css |  2 +-
 app/static/js/navigation.js   | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/static/css/navigation.css b/app/static/css/navigation.css
index 9a37443..2e6266b 100644
--- a/app/static/css/navigation.css
+++ b/app/static/css/navigation.css
@@ -17,4 +17,4 @@
 /* Sicherstellen, dass der Übergang smooth ist */
 .dropdown-menu {
     transition: all 0.3s ease-in-out;
-}
+}
\ No newline at end of file
diff --git a/app/static/js/navigation.js b/app/static/js/navigation.js
index bdc1496..ac5ef02 100644
--- a/app/static/js/navigation.js
+++ b/app/static/js/navigation.js
@@ -70,6 +70,10 @@ document.addEventListener('DOMContentLoaded', () => {
     }
   }
 
+function isSmallScreen() {
+  return window.innerWidth < 992; // Bootstrap-Breakpoint für 'lg'
+}
+    
 function adjustMenuPosition(submenu, parent, isTopLevel) {
     const rect = submenu.getBoundingClientRect();
     const parentRect = parent.getBoundingClientRect();
@@ -85,8 +89,13 @@ function adjustMenuPosition(submenu, parent, isTopLevel) {
     submenu.style.right = '';
 
     if (isTopLevel) {
+      if (isSmallScreen && spaceBelow < spaceAbove) {
+        // Für kleine Bildschirme: Menü direkt über dem Eltern-Element öffnen
+        submenu.style.top = 'auto';
+        submenu.style.bottom = `${parentRect.height}px`; // Direkt über dem Eltern-Element
+      } 
         // Top-Level-Menü
-        if (spaceBelow < spaceAbove) {
+        else if (spaceBelow < spaceAbove) {
             submenu.style.bottom = `${window.innerHeight - parentRect.bottom - parentRect.height}px`;
             submenu.style.top = 'auto';
         } else {