From d4c3f159d5a0dd5af91ed7324d813b054809336a Mon Sep 17 00:00:00 2001
From: rene <mail@motocamp.de>
Date: Tue, 14 Apr 2026 16:47:21 +0200
Subject: [PATCH] =?UTF-8?q?Fix:=20Karte-H=C3=B6he=20via=20JS,=20events=20L?=
 =?UTF-8?q?eaflet-Pfad,=20Hamburger-Men=C3=BC=20mobile=20Drawer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 backend/static/css/layout.css     | 46 +++++++++++++++++++++++++++++++
 backend/static/index.html         |  4 +++
 backend/static/js/app.js          | 39 ++++++++++++++++++++++++++
 backend/static/js/pages/events.js |  4 +--
 backend/static/js/pages/map.js    | 15 ++++++++++
 backend/static/sw.js              |  2 +-
 6 files changed, 107 insertions(+), 3 deletions(-)

diff --git a/backend/static/css/layout.css b/backend/static/css/layout.css
index ac7d084..443c7fe 100644
--- a/backend/static/css/layout.css
+++ b/backend/static/css/layout.css
@@ -83,9 +83,55 @@
 }
 .header-back:hover { background: var(--c-surface-2); }
 
+/* Hamburger-Button (nur Mobile) */
+.header-menu-btn {
+  width:           40px;
+  height:          40px;
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  border:          none;
+  background:      transparent;
+  font-size:       1.3rem;
+  color:           var(--c-text);
+  cursor:          pointer;
+  border-radius:   var(--radius-md);
+  flex-shrink:     0;
+  -webkit-tap-highlight-color: transparent;
+}
+.header-menu-btn:hover { background: var(--c-surface-2); }
+
+/* Backdrop für mobile Sidebar */
+.sidebar-backdrop {
+  display:    none;
+  position:   fixed;
+  inset:      0;
+  background: rgba(0,0,0,0.45);
+  z-index:    499;
+}
+.sidebar-backdrop.visible { display: block; }
+
 /* Auf Desktop keinen mobilen Header zeigen */
 @media (min-width: 768px) {
   #app-header { display: none; }
+  .header-menu-btn { display: none; }
+  .sidebar-backdrop { display: none !important; }
+}
+
+/* Mobile Sidebar als Drawer */
+@media (max-width: 767px) {
+  #sidebar {
+    display:    flex;
+    position:   fixed;
+    left:       calc(-1 * var(--nav-sidebar-width));
+    top:        0;
+    bottom:     0;
+    z-index:    500;
+    transition: left 0.28s ease;
+  }
+  #sidebar.open {
+    left: 0;
+  }
 }
 
 /* ------------------------------------------------------------
diff --git a/backend/static/index.html b/backend/static/index.html
index 93861a4..a26f266 100644
--- a/backend/static/index.html
+++ b/backend/static/index.html
@@ -39,8 +39,12 @@
       <span class="header-title" id="header-title">Ban Yaro</span>
     </div>
     <div id="header-actions"></div>
+    <button class="header-menu-btn" id="header-menu-btn" aria-label="Menü">☰</button>
   </header>
 
+  <!-- Backdrop für mobile Sidebar-Drawer -->
+  <div id="sidebar-backdrop" class="sidebar-backdrop"></div>
+
   <!-- DESKTOP SIDEBAR -->
   <nav id="sidebar" role="navigation" aria-label="Hauptnavigation">
     <div class="sidebar-logo" id="sidebar-dog-switcher">
diff --git a/backend/static/js/app.js b/backend/static/js/app.js
index 116a916..c863241 100644
--- a/backend/static/js/app.js
+++ b/backend/static/js/app.js
@@ -150,11 +150,30 @@ const App = (() => {
       // + Button (Mobile Bottom-Nav + Desktop Sidebar)
       if (e.target.closest('#nav-add') || e.target.closest('#sidebar-add')) {
         _showQuickAdd();
+        return;
+      }
+
+      // Hamburger-Menü (Mobile)
+      if (e.target.closest('#header-menu-btn')) {
+        _toggleSidebar();
+        return;
+      }
+
+      // Backdrop → Sidebar schließen
+      if (e.target.closest('#sidebar-backdrop')) {
+        _closeSidebar();
+        return;
+      }
+
+      // Sidebar-Item auf Mobile → schließen nach Navigation
+      if (e.target.closest('#sidebar .sidebar-item')) {
+        _closeSidebar();
       }
     });
 
     // Browser Back/Forward
     window.addEventListener('popstate', e => {
+      _closeSidebar();
       const page = e.state?.page || 'diary';
       navigate(page, false);
     });
@@ -163,6 +182,26 @@ const App = (() => {
     // damit kein doppelter _loadPage()-Aufruf entsteht.
   }
 
+  // ----------------------------------------------------------
+  // MOBILE SIDEBAR DRAWER
+  // ----------------------------------------------------------
+  function _toggleSidebar() {
+    const sidebar  = document.getElementById('sidebar');
+    const backdrop = document.getElementById('sidebar-backdrop');
+    const isOpen   = sidebar?.classList.contains('open');
+    isOpen ? _closeSidebar() : _openSidebar();
+  }
+
+  function _openSidebar() {
+    document.getElementById('sidebar')?.classList.add('open');
+    document.getElementById('sidebar-backdrop')?.classList.add('visible');
+  }
+
+  function _closeSidebar() {
+    document.getElementById('sidebar')?.classList.remove('open');
+    document.getElementById('sidebar-backdrop')?.classList.remove('visible');
+  }
+
   // ----------------------------------------------------------
   // SCHNELL-HINZUFÜGEN (+ Button)
   // ----------------------------------------------------------
diff --git a/backend/static/js/pages/events.js b/backend/static/js/pages/events.js
index e69f476..7efcda7 100644
--- a/backend/static/js/pages/events.js
+++ b/backend/static/js/pages/events.js
@@ -201,10 +201,10 @@ window.Page_events = (() => {
     return new Promise((resolve, reject) => {
       const link = document.createElement('link');
       link.rel  = 'stylesheet';
-      link.href = '/js/lib/leaflet.css';
+      link.href = '/css/leaflet.css';
       document.head.appendChild(link);
       const s = document.createElement('script');
-      s.src = '/js/lib/leaflet.js';
+      s.src = '/js/leaflet.js';
       s.onload  = resolve;
       s.onerror = reject;
       document.head.appendChild(s);
diff --git a/backend/static/js/pages/map.js b/backend/static/js/pages/map.js
index c18d0b5..55b96f6 100644
--- a/backend/static/js/pages/map.js
+++ b/backend/static/js/pages/map.js
@@ -129,6 +129,19 @@ window.Page_map = (() => {
     const el = document.getElementById('central-map');
     if (!el || !window.L || _map) return;
 
+    // Explizite Pixel-Höhe setzen, damit Leaflet Kacheln lädt.
+    // height:100% auf einem flex:1-Child ohne feste Parent-Höhe = 0px.
+    const layout = el.closest('.map-full-layout');
+    if (layout) {
+      const top = layout.getBoundingClientRect().top;
+      layout.style.height = (window.innerHeight - top) + 'px';
+      window.addEventListener('resize', () => {
+        const t = layout.getBoundingClientRect().top;
+        layout.style.height = (window.innerHeight - t) + 'px';
+        _map?.invalidateSize();
+      });
+    }
+
     const center = _userPos ? [_userPos.lat, _userPos.lon] : [51.1657, 10.4515];
     const zoom   = _userPos ? 13 : 6;
 
@@ -137,6 +150,8 @@ window.Page_map = (() => {
 
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19 })
      .addTo(_map);
+
+    setTimeout(() => _map.invalidateSize(), 100);
   }
 
   // ----------------------------------------------------------
diff --git a/backend/static/sw.js b/backend/static/sw.js
index e379bfe..f0c722a 100644
--- a/backend/static/sw.js
+++ b/backend/static/sw.js
@@ -3,7 +3,7 @@
    Offline-Cache + Push Notifications
    ============================================================ */
 
-const CACHE_VERSION = 'by-v24';
+const CACHE_VERSION = 'by-v25';
 const CACHE_STATIC  = `${CACHE_VERSION}-static`;
 
 // Diese Dateien werden beim Install gecacht (App Shell)