webseite/subject.php

@@ -318,7 +318,7 @@ $topics = $subjectData->topics;
             }
 
             .menu-toggle {
-                display: block;
+                display: none;
             }
 
             .search-box {
@@ -350,6 +350,10 @@ $topics = $subjectData->topics;
             .search-container {
                 padding: 0.75rem 1rem;
             }
+
+            .menu-toggle {
+                display: flex;
+            }
         }
 
         @media (max-width: 480px) {
@@ -391,17 +395,11 @@ $topics = $subjectData->topics;
             border-radius: 10px;
             cursor: pointer;
             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-            display: none;
-            width: 42px; /* Fixed width */
-            height: 42px; /* Fixed height */
-            display: flex; /* Added to center icon */
-            align-items: center; /* Added to center icon */
-            justify-content: center; /* Added to center icon */
-        }
-
-        /* Adjust the menu icon size */
-        .menu-toggle i {
-            font-size: 1.25rem; /* Standardize icon size */
+            width: 42px;
+            height: 42px;
+            align-items: center;
+            justify-content: center;
+            /* Remove display: none from here since we'll control it with JS */
         }
 
         /* Add floating animation for icons */
@@ -666,6 +664,20 @@ $topics = $subjectData->topics;
         document.querySelector('.sidebar').classList.toggle('active');
     }
 
+    // Add this right after your existing toggleSidebar function
+    function updateMenuVisibility() {
+        const menuToggle = document.querySelector('.menu-toggle');
+        if (window.innerWidth <= 768) { // Smartphone breakpoint
+            menuToggle.style.display = 'flex';
+        } else {
+            menuToggle.style.display = 'none';
+        }
+    }
+
+    // Add event listeners
+    window.addEventListener('load', updateMenuVisibility);
+    window.addEventListener('resize', updateMenuVisibility);
+
     // Animate progress bars on load
     document.addEventListener('DOMContentLoaded', () => {
         const progressBars = document.querySelectorAll('.progress-bar');