fix: add responsive hamburger menu for smaller width devices

anujsharma8d · anujsharma8d · commit faaf5f3a3638 · 2026-06-28T20:20:30.000+05:30
diff --git a/web-app/css/styles.css b/web-app/css/styles.css
@@ -3774,10 +3774,6 @@ body.sidebar-collapsed .playground-section {
     width: 100%;
   }
 
-  .mobile-menu-toggle {
-    display: flex;
-  }
-
   .nav-controls {
     display: none;
     flex-direction: column;
@@ -6580,6 +6576,10 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
   padding: 0 !important;
 }
 
+.hamburger{
+  display: none;
+}
+
 /* Force 3 equal columns on desktop (when sidebar is expanded OR collapsed) */
 @media (min-width: 1100px) {
 
@@ -6611,6 +6611,15 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
     margin-left: 0 !important;
     width: 100% !important;
   }
+
+}
+
+@media (max-width: 1280px) {
+
+    .sticky-filter-bar{
+      display:none ;
+    } 
+
 }
 
 /* Make cards take full width of their grid cell */
@@ -7158,4 +7167,33 @@ body.sidebar-collapsed .sidebar-dock .sidebar-footer .sidebar-main-controls {
   display: flex !important;
   visibility: visible !important;
   opacity: 1 !important;
+}
+
+@media (max-width: 900px) {
+
+    .mobile-menu-toggle{
+        display:flex !important;
+        position: fixed;
+        top: 16px;
+        right: 16px;
+
+        width:44px;
+        height:44px;
+          box-shadow: var(--shadow-sm);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+
+        align-items:center;
+        justify-content:center;
+
+        border-radius:12px;
+
+        z-index:9999;
+    }
+
+    .mobile-menu-toggle i{
+        font-size:22px;
+        color:var(--text);
+    }
+
 }
diff --git a/web-app/index.html b/web-app/index.html
@@ -36,6 +36,10 @@
 </head>
 
 <body class="sidebar-active">
+  <button type="button" class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle sidebar"
+        aria-expanded="true">
+        <i class="fas fa-bars"></i>
+      </button>
   <button aria-label="Switch theme" class="theme-toggle fixed-theme-toggle" id="fixed-theme-toggle" type="button">
     <i class="fas fa-moon" aria-hidden="true"></i>
   </button>
@@ -67,10 +71,6 @@
         <i class="fas fa-search"></i>
         <input aria-label="Search projects" id="navSearchInput" placeholder="Search projects or games..." type="text" />
       </div>
-      <button type="button" class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle sidebar"
-        aria-expanded="true">
-        <i class="fas fa-bars"></i>
-      </button>
       <div class="nav-controls" id="navControls">
         <button aria-label="Mute sounds" class="sound-toggle" type="button">
           <i class="fas fa-volume-up"></i>
diff --git a/web-app/js/main.js b/web-app/js/main.js
@@ -453,14 +453,6 @@ document.addEventListener("DOMContentLoaded", function () {
     });
   }
 
-  /* ── Mobile Sidebar Toggle ────────────────────────────────── */
-  if (mobileMenuToggle) {
-    mobileMenuToggle.addEventListener("click", function (e) {
-      e.stopPropagation();
-      document.body.classList.toggle("sidebar-active");
-    });
-  }
-
   document.addEventListener("click", function (e) {
     if (window.innerWidth < 1100) {
       var isClickInsideSidebar = mainSidebar && mainSidebar.contains(e.target);
