very messy mobile support. will improve

MagicJinn · MagicJinn · commit 70b9ab5c7af2 · 2025-11-24T22:29:46.000+01:00
diff --git a/wiki/css_main.css b/wiki/css_main.css
@@ -198,4 +198,78 @@ nav a:hover {
 #container_content::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
     background-color: #f5f5f5;
+}
+
+/* Mobile Hamburger Menu Button */
+#mobile-menu-toggle {
+    display: none;
+    position: fixed;
+    top: 10px;
+    left: 10px;
+    z-index: 1001;
+    background-color: #9c53e8;
+    color: white;
+    border: none;
+    padding: 10px 12px;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 20px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+
+#mobile-menu-toggle:hover {
+    background-color: #f7ae61;
+}
+
+#mobile-menu-toggle:active {
+    transform: scale(0.95);
+}
+
+/* Mobile Overlay */
+#mobile-overlay {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+}
+
+/* Mobile Responsive Styles */
+@media screen and (max-width: 768px) {
+    #mobile-menu-toggle {
+        display: block;
+    }
+
+    #container_navigation {
+        transform: translateX(-100%);
+        transition: transform 0.3s ease-in-out;
+        z-index: 1000;
+    }
+
+    #container_navigation.mobile-open {
+        transform: translateX(0);
+    }
+
+    #container_content {
+        left: 0;
+        width: 100%;
+        padding-left: 10px;
+        padding-right: 10px;
+    }
+
+    #logo {
+        width: 100%;
+        font-size: 28px;
+    }
+
+    #wiki-search {
+        width: calc(100% - 20px);
+    }
+
+    #mobile-overlay.mobile-open {
+        display: block;
+    }
 }
diff --git a/wiki/scripts/mobile-menu.js b/wiki/scripts/mobile-menu.js
@@ -0,0 +1,43 @@
+// Mobile menu toggle functionality
+(function () {
+    var menuToggle = document.getElementById('mobile-menu-toggle');
+    var navigation = document.getElementById('container_navigation');
+    var overlay = document.getElementById('mobile-overlay');
+
+    if (menuToggle && navigation && overlay) {
+        function toggleMenu() {
+            navigation.classList.toggle('mobile-open');
+            overlay.classList.toggle('mobile-open');
+        }
+
+        function closeMenu() {
+            navigation.classList.remove('mobile-open');
+            overlay.classList.remove('mobile-open');
+        }
+
+        menuToggle.addEventListener('click', function (e) {
+            e.stopPropagation();
+            toggleMenu();
+        });
+
+        overlay.addEventListener('click', function () {
+            closeMenu();
+        });
+
+        // Close menu when clicking on a navigation link
+        var navLinks = navigation.querySelectorAll('a');
+        navLinks.forEach(function (link) {
+            link.addEventListener('click', function () {
+                closeMenu();
+            });
+        });
+
+        // Close menu on escape key
+        document.addEventListener('keydown', function (e) {
+            if (e.key === 'Escape' && navigation.classList.contains('mobile-open')) {
+                closeMenu();
+            }
+        });
+    }
+})();
+
diff --git a/wiki/templates/base.html b/wiki/templates/base.html
@@ -42,6 +42,8 @@
   {extra_css}
 </head>
 <body>
+  <button id="mobile-menu-toggle" aria-label="Toggle menu">☰</button>
+  <div id="mobile-overlay"></div>
   <div id="wrapper">
     <div id="container_navigation">
       <div id="logo">
@@ -58,6 +60,7 @@
   <script src="{assets_path}navigation.js" defer></script>
   <script src="{assets_path}dark-mode.js" defer></script>
   <script src="{assets_path}search.js" defer></script>
+  <script src="{assets_path}mobile-menu.js" defer></script>
 </body>
 </html>
 
