From 6a43435950df62d733e8a2df13a021ec7f75b4f1 Mon Sep 17 00:00:00 2001
From: Elias Jansson <elias.jansson@gmail.com>
Date: Fri, 13 Jun 2025 10:41:00 +0200
Subject: [PATCH] Layout fixad

---
 Aberwyn/Properties/launchSettings.json |   2 +-
 Aberwyn/Views/Shared/_Layout.cshtml    |  50 +--------
 Aberwyn/wwwroot/css/site.css           | 149 +++++++++++++++++--------
 Aberwyn/wwwroot/js/site.js             |  89 +++++++++++++++
 4 files changed, 200 insertions(+), 90 deletions(-)

diff --git a/Aberwyn/Properties/launchSettings.json b/Aberwyn/Properties/launchSettings.json
index a663ecc..2ef5bcb 100644
--- a/Aberwyn/Properties/launchSettings.json
+++ b/Aberwyn/Properties/launchSettings.json
@@ -14,7 +14,7 @@
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },
-      "applicationUrl": "https://localhost:7290;http://localhost:5290"
+      "applicationUrl": "https://localhost:7290;http://localhost:5290;http://0.0.0.0:5000"
     },
   "IIS Express": {
     "commandName": "IISExpress",
diff --git a/Aberwyn/Views/Shared/_Layout.cshtml b/Aberwyn/Views/Shared/_Layout.cshtml
index a6d5878..9e7cfc6 100644
--- a/Aberwyn/Views/Shared/_Layout.cshtml
+++ b/Aberwyn/Views/Shared/_Layout.cshtml
@@ -50,9 +50,9 @@
     @if (User.IsInRole("Chef"))
     {
         <li class="dropdown">
-            <button class="dropdown-toggle" type="button" tabindex="0">
+            <a href="#" class="dropdown-toggle" role="button" tabindex="0">
                 <i class="fas fa-list"></i> Kök <i class="fas fa-caret-down"></i>
-            </button>
+            </a>
             <ul class="dropdown-menu">
                 <li><a asp-controller="FoodMenu" asp-action="Veckomeny">Planera Veckomeny</a></li>
                 <li><a asp-controller="FoodMenu" asp-action="PizzaAdmin">Pizza Admin</a></li>
@@ -63,9 +63,9 @@
     @if (User.IsInRole("Admin"))
     {
         <li class="dropdown">
-            <button class="dropdown-toggle" type="button" tabindex="0">
+            <a href="#" class="dropdown-toggle" role="button" tabindex="0">
                 <i class="fas fa-cog"></i> Admin <i class="fas fa-caret-down"></i>
-            </button>
+            </a>
             <ul class="dropdown-menu">
                 <li><a asp-controller="Admin" asp-action="Index">Adminpanel</a></li>
                 <li><a asp-controller="Admin" asp-action="Todo">Todo</a></li>
@@ -84,48 +84,8 @@
             @RenderSection("Scripts", required: false)
         </main>
     </div>
-
+    <div id="global-dropdown-container" style="position: relative; z-index: 10000;"></div>
     <script src="~/js/site.js" asp-append-version="true"></script>
-<script>
-document.addEventListener("DOMContentLoaded", () => {
-    const dropdowns = document.querySelectorAll(".dropdown");
-
-    dropdowns.forEach(dropdown => {
-        const toggle = dropdown.querySelector(".dropdown-toggle");
-        const menu = dropdown.querySelector(".dropdown-menu");
-
-        toggle.addEventListener("click", e => {
-            e.preventDefault();
-            e.stopPropagation();
-            const isOpen = dropdown.classList.contains("open");
-
-            // Stäng alla andra först
-            document.querySelectorAll(".dropdown.open").forEach(d => {
-                if (d !== dropdown) d.classList.remove("open");
-            });
-
-            dropdown.classList.toggle("open", !isOpen);
-
-            if (!isOpen) {
-                const rect = toggle.getBoundingClientRect();
-                menu.style.position = "fixed";
-                menu.style.top = rect.bottom + "px";
-                menu.style.left = rect.left + "px";
-                menu.style.zIndex = 3000;
-            } else {
-                menu.style.top = "";
-                menu.style.left = "";
-            }
-        });
-    });
-
-    // Klick utanför stänger alla dropdowns
-    document.addEventListener("click", () => {
-        document.querySelectorAll(".dropdown.open").forEach(d => d.classList.remove("open"));
-    });
-});
-</script>
-
 
 </body>
 </html>
diff --git a/Aberwyn/wwwroot/css/site.css b/Aberwyn/wwwroot/css/site.css
index a1f9926..7e59509 100644
--- a/Aberwyn/wwwroot/css/site.css
+++ b/Aberwyn/wwwroot/css/site.css
@@ -1,5 +1,5 @@
 /* ==========================================================================
-   HEADER � LEWEL DESIGN (utan meny)
+   HEADER LEWEL DESIGN (utan meny)
    ========================================================================== */
 .top-bar {
     display: flex;
@@ -151,21 +151,17 @@ body {
     flex-grow: 1;
     background-color: #223344;
     width: 100%; /* force full width */
-    max-width: unset; 
-    position: relative; 
+    max-width: unset;
+    position: relative;
     z-index: 0;
+    overflow: visible !important;
 }
 
-
-
-
-
-
 .main-panel {
     flex: 1;
     background: linear-gradient(to bottom right, #f9fafb, #e2e8f0);
     border-radius: 0 0 10px 10px;
-    overflow: hidden;
+    overflow: visible;
     padding: 0px;
     box-shadow: 0 4px 12px rgba(0,0,0,0.15);
     display: flex;
@@ -175,6 +171,8 @@ body {
     font-size: 16px;
     line-height: 1.7;
     margin-top: 0;
+    position: static !important;
+    z-index: auto !important;
 }
 
 /* ==========================================================================
@@ -227,47 +225,38 @@ body {
     top: 54px;
     left: 0;
     right: 0;
-    z-index: 2000; /* Högt nog för att ligga över allt annat */
+    z-index: 1000;
     background-color: #f3f4f6;
     box-shadow: 0 1px 2px rgba(0,0,0,0.1);
     padding: 5px 8px;
     font-size: 13px;
-    overflow-x: auto; /* behåll för horisontell scroll */
-    overflow-y: visible; /* tillåt dropdown att spilla ut */
+    overflow-x: auto;
+    overflow-y: visible;
+    overflow: visible !important;
+    -webkit-overflow-scrolling: touch;
 }
 
-
-
-
 @media (min-width: 769px) {
-    .main-nav {
-        position: sticky;
-        top: 54px;
-        left: 0;
-        right: 0;
-        z-index: 1001;
-    }
-
-    .main-panel {
-        margin-top: 0px; /* justera beroende på hur hög nav-baren är */
+    .nav-list-horizontal {
+        overflow: visible;
     }
 }
-
-
 .nav-list-horizontal {
     display: flex;
     flex-wrap: nowrap;
-    gap: 5px 0px 0px 0px;
-    margin: 5px 0px 0px 0px;
+    gap: 5px;
+    margin: 5px 0 0 0;
     padding: 0;
     list-style: none;
     white-space: nowrap;
-    /* Viktigt: ta bort all overflow här */
-    overflow: visible;
     position: relative;
     z-index: 1;
+    overflow-y: visible;
+    -webkit-overflow-scrolling: touch;
 }
-
+    .nav-list-horizontal > li {
+        position: relative;
+    }
     .nav-list-horizontal li a {
         text-decoration: none;
         color: #1F2C3C;
@@ -288,15 +277,8 @@ body {
 /* ==========================================================================
    RESPONSIVT
    ========================================================================== */
-@media (max-width: 768px) {
-    .page-content {
-        flex-direction: column;
-    }
 
-    .sidebar {
-        width: 100%;
-    }
-}
+
 
 /* ==========================================================================
    Dropdown
@@ -323,6 +305,7 @@ body {
     height: 100%; /* viktigt för vertikal alignment */
     user-select: none;
     touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
 }
 
     .dropdown-toggle:hover {
@@ -333,7 +316,7 @@ body {
     position: absolute;
     top: 100%;
     left: 0;
-    transform: translateY(4px); /* lite spacing nedåt */
+    transform: translateY(4px);
     background-color: #ffffff;
     border: 1px solid #ccc;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
@@ -341,14 +324,12 @@ body {
     display: none;
     flex-direction: column;
     min-width: 180px;
-    z-index: 3000;
+    z-index: 1001;
     padding: 4px 0;
     font-size: 14px;
     max-width: 90vw;
-    overflow-wrap: break-word;
 }
 
-
 .dropdown.open .dropdown-menu {
     display: flex;
 }
@@ -368,3 +349,83 @@ body {
         background-color: #f0f0f0;
     }
 
+
+
+@media (max-width: 768px) {
+    html, body {
+        overflow-x: hidden;
+        overscroll-behavior-x: contain;
+    }
+
+    .main-panel {
+        position: relative !important;
+        z-index: 1 !important;
+    }
+
+    .main-nav {
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+        overflow-x: auto;
+        overflow-y: visible;
+        -webkit-overflow-scrolling: touch;
+        background-color: #f3f4f6;
+        padding: 5px 8px;
+        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
+    }
+
+    .nav-list-horizontal {
+        display: flex;
+        overflow-x: auto;
+        overflow-y: hidden;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+        padding: 0;
+        margin: 0;
+        gap: 5px;
+        list-style: none;
+    }
+
+    .dropdown-menu {
+        position: fixed !important;
+        right: 12px;
+        background-color: #ffffff;
+        border: 1px solid #ccc;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
+        border-radius: 8px;
+        display: none;
+        flex-direction: column;
+        padding: 4px 0;
+        font-size: 14px;
+        z-index: 99999;
+        width: max-content;
+        max-width: 90vw;
+        min-width: 160px; /* valfritt, för att undvika att det blir för smalt */
+    }
+
+    .dropdown.open .dropdown-menu {
+        display: flex !important;
+    }
+
+    .dropdown,
+    .auth-menu,
+    .auth-links {
+        position: relative;
+        z-index: 99998;
+    }
+
+    .dropdown-menu li {
+        list-style: none;
+    }
+
+        .dropdown-menu li a {
+            padding: 8px 12px;
+            color: #1F2C3C;
+            text-decoration: none;
+            font-size: 13px;
+        }
+
+            .dropdown-menu li a:hover {
+                background-color: #f0f0f0;
+            }
+}
diff --git a/Aberwyn/wwwroot/js/site.js b/Aberwyn/wwwroot/js/site.js
index 0fa32e7..4e9d351 100644
--- a/Aberwyn/wwwroot/js/site.js
+++ b/Aberwyn/wwwroot/js/site.js
@@ -13,6 +13,95 @@ if ('serviceWorker' in navigator) {
             });
     });
 }
+document.addEventListener("DOMContentLoaded", () => {
+    const dropdowns = document.querySelectorAll(".dropdown");
+    const globalContainer = document.getElementById("global-dropdown-container");
+
+    dropdowns.forEach((dropdown, index) => {
+        const toggle = dropdown.querySelector(".dropdown-toggle");
+        const menu = dropdown.querySelector(".dropdown-menu");
+
+        if (!toggle || !menu) return;
+
+        let originalParent = dropdown;
+
+        toggle.addEventListener("click", e => {
+            e.preventDefault();
+            e.stopPropagation();
+
+            const isOpen = dropdown.classList.contains("open");
+
+            // Stäng andra
+            document.querySelectorAll(".dropdown.open").forEach(d => {
+                d.classList.remove("open");
+                const m = d.querySelector(".dropdown-menu");
+                if (m && d !== dropdown) {
+                    d.appendChild(m);
+                    resetStyles(m);
+                }
+            });
+
+            dropdown.classList.toggle("open", !isOpen);
+
+            if (!isOpen && window.innerWidth <= 768) {
+                const rect = toggle.getBoundingClientRect();
+                const scrollTop = window.scrollY || document.documentElement.scrollTop;
+                const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
+
+                let top = rect.bottom + scrollTop - 20;
+                let left = rect.left + scrollLeft;
+                const vw = window.innerWidth;
+                const mw = menu.offsetWidth;
+
+                if (left + mw > vw) {
+                    left = vw - mw - 10;
+                }
+                if (left < 10) left = 10;
+
+                // Flytta till global container
+                globalContainer.appendChild(menu);
+
+                Object.assign(menu.style, {
+                    position: "fixed",
+                    top: `${top}px`,
+                    left: `${left}px`,
+                    zIndex: "99999",
+                    display: "flex"
+                });
+            } else {
+                // Återställ till original
+                originalParent.appendChild(menu);
+                resetStyles(menu);
+            }
+        });
+    });
+
+    document.addEventListener("click", () => {
+        document.querySelectorAll(".dropdown.open").forEach(d => {
+            d.classList.remove("open");
+            const m = d.querySelector(".dropdown-menu");
+            if (m) {
+                d.appendChild(m);
+                resetStyles(m);
+            }
+        });
+
+        // Töm extra container
+        if (globalContainer) globalContainer.innerHTML = '';
+    });
+
+    function resetStyles(menu) {
+        Object.assign(menu.style, {
+            position: "",
+            top: "",
+            left: "",
+            zIndex: "",
+            display: ""
+        });
+    }
+});
+
+
 
 async function subscribeToPush() {
     const registration = await navigator.serviceWorker.ready;