Refactor navigation functionality by moving sticky behavior to main.js and removing inline script from index.html

Author: webdevjosue

index.html

@@ -139,21 +139,6 @@ <h2 class="text-2xl md:text-3xl lg:text-4xl font-bold">
     <footer class="text-center py-6 bg-gray-100 mt-8">
       <p class="text-gray-600">Josue Zazueta LLC (c)</p>
     </footer>
-    <script>
-      document.addEventListener("DOMContentLoaded", function () {
-        const nav = document.querySelector(".nav-container");
-        const heroSection = document.querySelector("#hero");
-        const navOffset = nav.offsetTop;
-
-        window.addEventListener("scroll", () => {
-          const scrollPosition = window.scrollY + 16; // Adding 16px buffer
-          if (scrollPosition > heroSection.offsetHeight) {
-            nav.classList.add("sticky");
-          } else {
-            nav.classList.remove("sticky");
-          }
-        });
-      });
-    </script>
+    <script src="js/main.js"></script>
   </body>
 </html>

js/main.js

@@ -0,0 +1,34 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const nav = document.querySelector(".nav-container");
+  const heroSection = document.querySelector("#hero");
+  const navOffset = nav.offsetTop;
+  const navCheckbox = document.getElementById("nav-toggle");
+  const dropdown = document.querySelector(".dropdown");
+
+  // Sticky navigation handling
+  window.addEventListener("scroll", () => {
+    const scrollPosition = window.scrollY + 16;
+    if (scrollPosition > heroSection.offsetHeight) {
+      nav.classList.add("sticky");
+    } else {
+      nav.classList.remove("sticky");
+    }
+  });
+
+  // Function to close the menu
+  const closeMenu = () => {
+    navCheckbox.checked = false;
+  };
+
+  // Close menu when clicking links
+  dropdown.querySelectorAll("a").forEach((link) => {
+    link.addEventListener("click", closeMenu);
+  });
+
+  // Close menu when clicking outside
+  document.addEventListener("click", (e) => {
+    if (!nav.contains(e.target)) {
+      closeMenu();
+    }
+  });
+});