From 5d5f9b8ff0d6ad7aea0ed123bc1ee7c7332cf2d2 Mon Sep 17 00:00:00 2001
From: Kelvi Yawo Jules Agbessi Awuklu <kelvi.awuklu@alumni.fh-aachen.de>
Date: Sun, 17 Nov 2024 17:37:17 +0100
Subject: [PATCH] =?UTF-8?q?Problem=20mit=20der=20Menu=20Button=20gel=C3=B6?=
 =?UTF-8?q?st?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 webseite/subject.php | 205 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 162 insertions(+), 43 deletions(-)

diff --git a/webseite/subject.php b/webseite/subject.php
index 7ff4bd4..641fa22 100644
--- a/webseite/subject.php
+++ b/webseite/subject.php
@@ -109,16 +109,16 @@ $topics = $subjectData->topics;
         .search-container {
             position: fixed;
             top: 0;
-            left: 280px;
             right: 0;
-            padding: 1rem 2rem;
+            padding: 1rem;
             background: var(--card-bg);
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            transition: left 0.3s ease;
             z-index: 40;
             display: flex;
             align-items: center;
             gap: 1rem;
+            transition: all 0.3s ease;
+            width: auto;
         }
 
         .search-box {
@@ -297,7 +297,31 @@ $topics = $subjectData->topics;
             transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
         }
 
+        @media (min-width: 1025px) {
+            .menu-toggle {
+                display: none;
+            }
+
+            .sidebar {
+                transform: translateX(0);
+            }
+
+            .search-container {
+                left: 280px; /* Sidebar width */
+                width: calc(100% - 280px);
+            }
+
+            .main-content {
+                margin-left: 280px;
+                width: calc(100% - 280px);
+            }
+        }
+
         @media (max-width: 1024px) {
+            .menu-toggle {
+                display: flex !important;
+            }
+
             .sidebar {
                 transform: translateX(-100%);
             }
@@ -306,53 +330,30 @@ $topics = $subjectData->topics;
                 transform: translateX(0);
             }
 
+            .search-container {
+                left: 0;
+                width: 100%;
+                padding-left: 4.5rem;
+            }
+
             .main-content {
                 margin-left: 0;
                 width: 100%;
             }
 
-            .search-container {
-                left: 0;
-                padding: 0.85rem; /* Match with menu-toggle top */
-                padding-left: 4.5rem; /* Increased space for menu icon */
-            }
-
-            .menu-toggle {
-                display: none;
-            }
-
             .search-box {
-                width: calc(100% - 1rem); /* Adjust width to account for padding */
-            }
-
-            .container {
-                grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); /* Slightly smaller for tablets */
-                gap: 1.5rem;
-                padding: 1.5rem;
+                width: calc(100% - 2rem);
             }
         }
 
         @media (max-width: 768px) {
-            .container {
-                grid-template-columns: 1fr; /* Single column on mobile */
-                gap: 1.5rem;
-                padding: 1rem;
-            }
-
-            .topic-card {
-                margin: 0 1rem; /* Add horizontal margins */
-            }
-
-            .main-content {
-                padding-top: 4rem;
-            }
-
             .search-container {
-                padding: 0.75rem 1rem;
+                padding: 1rem;
+                padding-left: 4.5rem;
             }
 
-            .menu-toggle {
-                display: flex;
+            .search-box {
+                width: 100%;
             }
         }
 
@@ -386,10 +387,10 @@ $topics = $subjectData->topics;
 
         .menu-toggle {
             position: fixed;
-            top: 0.85rem; /* Adjusted to align with search bar */
+            top: 1rem;
             left: 1rem;
             z-index: 60;
-            background: white;
+            background: var(--card-bg);
             border: none;
             padding: 0.75rem;
             border-radius: 10px;
@@ -397,9 +398,11 @@ $topics = $subjectData->topics;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
             width: 42px;
             height: 42px;
+            display: none; /* Hidden by default */
             align-items: center;
             justify-content: center;
-            /* Remove display: none from here since we'll control it with JS */
+            color: var(--text-primary);
+            transition: all 0.3s ease;
         }
 
         /* Add floating animation for icons */
@@ -660,9 +663,86 @@ $topics = $subjectData->topics;
 </div>
 
 <script>
-    function toggleSidebar() {
-        document.querySelector('.sidebar').classList.toggle('active');
-    }
+    document.addEventListener('DOMContentLoaded', () => {
+        const menuToggle = document.querySelector('.menu-toggle');
+        const sidebar = document.querySelector('.sidebar');
+        const searchContainer = document.querySelector('.search-container');
+        const mainContent = document.querySelector('.main-content');
+
+        // Function to handle sidebar toggle
+        function toggleSidebar() {
+            sidebar.classList.toggle('active');
+
+            // Add overlay when sidebar is active on mobile/tablet
+            if (window.innerWidth <= 1024) {
+                if (sidebar.classList.contains('active')) {
+                    addOverlay();
+                } else {
+                    removeOverlay();
+                }
+            }
+        }
+
+        // Function to add overlay
+        function addOverlay() {
+            const overlay = document.createElement('div');
+            overlay.className = 'sidebar-overlay';
+            overlay.style.cssText = `
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 45;
+                transition: opacity 0.3s ease;
+            `;
+            document.body.appendChild(overlay);
+
+            // Close sidebar when clicking overlay
+            overlay.addEventListener('click', () => {
+                sidebar.classList.remove('active');
+                removeOverlay();
+            });
+
+            // Fade in
+            requestAnimationFrame(() => {
+                overlay.style.opacity = '1';
+            });
+        }
+
+        // Function to remove overlay
+        function removeOverlay() {
+            const overlay = document.querySelector('.sidebar-overlay');
+            if (overlay) {
+                overlay.style.opacity = '0';
+                setTimeout(() => overlay.remove(), 300);
+            }
+        }
+
+        // Add click event to menu toggle
+        menuToggle.addEventListener('click', toggleSidebar);
+
+        // Handle window resize
+        let resizeTimer;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(() => {
+                if (window.innerWidth > 1024) {
+                    sidebar.classList.remove('active');
+                    removeOverlay();
+                }
+            }, 250);
+        });
+
+        // Handle escape key to close sidebar
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape' && sidebar.classList.contains('active')) {
+                sidebar.classList.remove('active');
+                removeOverlay();
+            }
+        });
+    });
 
     // Add this right after your existing toggleSidebar function
     function updateMenuVisibility() {
@@ -848,6 +928,45 @@ $topics = $subjectData->topics;
             }
         });
     }
+
+    // Update the menu visibility JavaScript
+    document.addEventListener('DOMContentLoaded', () => {
+        const menuToggle = document.querySelector('.menu-toggle');
+        const sidebar = document.querySelector('.sidebar');
+
+        // Force correct initial state based on viewport
+        function updateMenuState() {
+            if (window.innerWidth <= 1024) {
+                menuToggle.style.display = 'flex';
+                sidebar.style.transform = 'translateX(-100%)';
+            } else {
+                menuToggle.style.display = 'none';
+                sidebar.style.transform = 'translateX(0)';
+            }
+        }
+
+        // Initial state
+        updateMenuState();
+
+        // Update on resize with debounce
+        let resizeTimer;
+        window.addEventListener('resize', () => {
+            clearTimeout(resizeTimer);
+            resizeTimer = setTimeout(updateMenuState, 250);
+        });
+
+        // Toggle sidebar
+        menuToggle.addEventListener('click', () => {
+            const isHidden = sidebar.style.transform === 'translateX(-100%)';
+            sidebar.style.transform = isHidden ? 'translateX(0)' : 'translateX(-100%)';
+
+            if (isHidden) {
+                addOverlay();
+            } else {
+                removeOverlay();
+            }
+        });
+    });
 </script>
 
 <!-- Code injected by live-server -->