Merge pull request steam-bell-92#567 from nishtha-agarwal-211/fix/decorative-code-overlapping-474

fix(navbar): restore floating island layout and mobile hamburger menu

Author: steam-bell-92

web-app/index.html

@@ -842,10 +842,10 @@
     </a>
 <div aria-hidden="true" class="cursor-glow" id="cursorGlow"></div>
 <!-- Navigation -->
-     <nav aria-label="Primary" class="navbar">
-         <div class="container nav-wrapper">
-             <!-- LEFT -->
-             <div class="navbar-brand">
+<nav aria-label="Primary" class="navbar" id="mainNavbar">
+<div class="nav-island">
+<!-- LEFT -->
+<div class="navbar-brand">
 <a class="logo-wrap" href="#">
 <!-- LOGO IMAGE -->
 <img alt="PyMini Logo" class="navbar-logo" src="assets/logo.png"/>
@@ -861,20 +861,19 @@
 </span>
 </a>
 </div>
-
-        <div class="container1">
-            <div aria-label="Project categories" class="hero-features" role="tablist">
-<button aria-selected="true" class="feature-badge tab active" data-category="all" role="tab" tabindex="0">
-<span class="feature-icon"><i data-lucide="star"></i></span>
-<span class="feature-label">all</span>
-</button>
-<button aria-selected="false" class="feature-badge tab" data-category="games" role="tab" tabindex="-1">
-<span class="feature-icon"><i data-lucide="gamepad-2"></i></span>
-<span class="feature-label">games</span>
+<!-- CENTER SEARCH -->
+<div class="search-box">
+<i class="fas fa-search"></i>
+<input aria-label="Search projects" id="searchInput" placeholder="Search projects or games..." type="text"/>
+</div>
+<!-- HAMBURGER TOGGLE (mobile) -->
+<button type="button" class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation menu" aria-expanded="false">
+<i class="fas fa-bars"></i>
 </button>
-<button aria-selected="false" class="feature-badge tab" data-category="math" role="tab" tabindex="-1">
-<span class="feature-icon"><i data-lucide="hash"></i></span>
-<span class="feature-label">math</span>
+<!-- RIGHT -->
+<div class="nav-controls" id="navControls">
+<button aria-label="Mute sounds" class="sound-toggle" id="soundToggle" type="button">
+<i class="fas fa-volume-up"></i>
 </button>
 <button aria-selected="false" class="feature-badge tab" data-category="utilities" role="tab" tabindex="-1">
 <span class="feature-icon"><i data-lucide="lock"></i></span>
@@ -1473,6 +1472,34 @@ <h3>Stay Updated</h3>
                 }
             });
         });
+
+    // Handle Scroll Transitions to resize the floating layout dynamically
+    const mainNavbar = document.getElementById("mainNavbar");
+    window.addEventListener("scroll", () => {
+        if (window.scrollY > 40) {
+            mainNavbar.classList.add("scrolled");
+        } else {
+            mainNavbar.classList.remove("scrolled");
+        }
+    });
+
+    // Mobile Navigation Controls Open/Close interface handlers
+    const mobileMenuToggle = document.getElementById("mobileMenuToggle");
+    const navControls = document.getElementById("navControls");
+
+    mobileMenuToggle.addEventListener("click", () => {
+        const isActive = navControls.classList.toggle("mobile-active");
+        mobileMenuToggle.setAttribute("aria-expanded", isActive);
+        mobileMenuToggle.querySelector("i").className = isActive ? "fas fa-times" : "fas fa-bars";
+    });
+
+    document.addEventListener("click", (e) => {
+        if (!navControls.contains(e.target) && !mobileMenuToggle.contains(e.target) && navControls.classList.contains("mobile-active")) {
+            navControls.classList.remove("mobile-active");
+            mobileMenuToggle.setAttribute("aria-expanded", "false");
+            mobileMenuToggle.querySelector("i").className = "fas fa-bars";
+        }
+    });
     </script>
 </body>
 </html>