Website overhaul completed

src/js/navigation.js

@@ -0,0 +1,106 @@
+// Navigation JavaScript
+let lastScrollY = window.scrollY;
+let ticking = false;
+
+function updateNavigation() {
+  const navigation = document.getElementById("navigation");
+  const scrolled = window.scrollY > 50;
+
+  if (scrolled) {
+    navigation.classList.add("scrolled");
+
+    // Hide/show nav on scroll
+    if (window.scrollY > lastScrollY && window.scrollY > 100) {
+      navigation.classList.add("hidden");
+    } else {
+      navigation.classList.remove("hidden");
+    }
+  } else {
+    navigation.classList.remove("scrolled", "hidden");
+  }
+
+  lastScrollY = window.scrollY;
+  ticking = false;
+}
+
+function requestTick() {
+  if (!ticking) {
+    requestAnimationFrame(updateNavigation);
+    ticking = true;
+  }
+}
+
+// Mobile navigation functionality
+function setupMobileNavigation() {
+  const burgerMenu = document.getElementById("burger-menu");
+  const mainNav = document.getElementById("main-nav");
+  const body = document.body;
+
+  // Create overlay for mobile menu
+  const overlay = document.createElement("div");
+  overlay.className = "nav-overlay";
+  document.body.appendChild(overlay);
+
+  if (burgerMenu && mainNav) {
+    burgerMenu.addEventListener("click", function () {
+      const isActive = mainNav.classList.contains("active");
+
+      if (isActive) {
+        // Close menu
+        mainNav.classList.remove("active");
+        burgerMenu.classList.remove("active");
+        overlay.classList.remove("active");
+        body.classList.remove("nav-open");
+      } else {
+        // Open menu
+        mainNav.classList.add("active");
+        burgerMenu.classList.add("active");
+        overlay.classList.add("active");
+        body.classList.add("nav-open");
+      }
+    });
+
+    // Close menu when clicking on overlay
+    overlay.addEventListener("click", function () {
+      mainNav.classList.remove("active");
+      burgerMenu.classList.remove("active");
+      overlay.classList.remove("active");
+      body.classList.remove("nav-open");
+    });
+
+    // Close menu when clicking on a link
+    const navLinks = mainNav.querySelectorAll("a");
+    navLinks.forEach((link) => {
+      link.addEventListener("click", function () {
+        mainNav.classList.remove("active");
+        burgerMenu.classList.remove("active");
+        overlay.classList.remove("active");
+        body.classList.remove("nav-open");
+
+        // Update active state
+        navLinks.forEach((l) => l.classList.remove("active"));
+        this.classList.add("active");
+      });
+    });
+
+    // Set initial active state based on current hash
+    function setActiveNavLink() {
+      const currentHash = window.location.hash || "#home";
+      navLinks.forEach((link) => {
+        if (link.getAttribute("href") === currentHash) {
+          link.classList.add("active");
+        } else {
+          link.classList.remove("active");
+        }
+      });
+    }
+
+    // Update active state on hash change
+    window.addEventListener("hashchange", setActiveNavLink);
+    setActiveNavLink();
+  }
+}
+
+// Initialize navigation
+window.addEventListener("scroll", requestTick);
+window.addEventListener("load", updateNavigation);