✨feature: Enhance navigation components with scroll control and styling updates

header.php

@@ -49,7 +49,7 @@ $showHero = in_array(
 	<?php get_template_part( 'views/partials/aura-bg' ); ?>
 
 	<header role="banner" class="site-header bg-secondary flex flex-col items-center justify-start">
-		<div class="header__nav-main container py-4 items-center grid gap-x-8 gap-y-0 grid-cols-[auto_1fr_auto] grid-rows-[1fr] justify-between">
+		<div class="header__nav-main lg:container py-4 items-center flex gap-x-8 gap-y-0 justify-between">
 			<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-header__logo m-0 p-0 flex gap-x-4 items-center justify-start text-white! text-45px font-bold leading-none hover:underline">
 				<img class="site-header__logo-img aspect-square h-full w-full max-h-12 max-w-12" src="<?php echo esc_url( $headerLogo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?> logo" /> Keith Solomon
 			</a>

static/js/modules/Navigation.js

@@ -54,6 +54,12 @@ class Navigation {
    */
   #slidingViewportEnabled = false;
 
+  /**
+   * Function reference for preventing scroll (needed to remove listener)
+   * @type {Function}
+   */
+  #preventScrollHandler = (e) => e.preventDefault();
+
 
 
   constructor(mobileMenuButtonId, dropDownClass, subMenuLinkClass = "sub-menu-item") {
@@ -118,7 +124,14 @@ class Navigation {
 
     const isExpanded = button.getAttribute("aria-expanded") === "true";
 
-    if (!isExpanded) {
+    if (isExpanded) {
+      // Prevent scroll when menu is open
+      document.documentElement.style.overflow = "hidden";
+      document.body.style.overflow = "hidden";
+    } else {
+      // Re-enable scroll when menu is closed
+      document.documentElement.style.overflow = "";
+      document.body.style.overflow = "";
       // Reset sliding navigation when menu is closed
       if (this.#slidingViewportEnabled) {
         this.resetSlidingNavigation();
@@ -172,12 +185,23 @@ class Navigation {
           && !event.relatedTarget.classList.contains("menu-vdi__link")
           && !event.relatedTarget.classList.contains("menu-vdi__back"); // Don't close on back button click
 
-        if (isNull || isNotMenuItem)
+        if (isNull || isNotMenuItem) {
           button.setAttribute("aria-expanded", false);
+          // Re-enable scroll when menu is closed
+          document.documentElement.style.overflow = "";
+          document.body.style.overflow = "";
+        }
       }, true)
     }
   }
 
+  /**
+   * Handles escape behaviour
+   *  Closes all dropdown when user hits
+   *  escape key
+   *
+   * @link {https://developer.mozilla.org/en-US/docs/Web/API/Element/keyup_event}
+   */
   /**
    * Handles escape behaviour
    *  Closes all dropdown when user hits
@@ -191,6 +215,10 @@ class Navigation {
         this.#mobileMenuButton.setAttribute("aria-expanded", false);
         this.closeAllDropDowns();
 
+        // Re-enable scroll when menu is closed
+        document.documentElement.style.overflow = "";
+        document.body.style.overflow = "";
+
         // Reset sliding navigation on escape
         if (this.#slidingViewportEnabled) {
           this.resetSlidingNavigation();
@@ -571,6 +599,44 @@ class Navigation {
 
     console.log('Sliding structure cleaned up');
   }
+
+  /**
+   * Disable scroll on the page
+   * Prevents scrolling in all directions
+   */
+  disableScroll() {
+    try {
+      // Apply overflow hidden to both html and body for better compatibility
+      document.documentElement.style.overflow = "hidden";
+      document.body.style.overflow = "hidden";
+
+      // Prevent touch scroll on mobile devices
+      if (this.#preventScrollHandler) {
+        document.addEventListener("touchmove", this.#preventScrollHandler, { passive: false });
+      }
+    } catch (error) {
+      console.warn("Error disabling scroll:", error);
+    }
+  }
+
+  /**
+   * Enable scroll on the page
+   * Restores normal scrolling behavior
+   */
+  enableScroll() {
+    try {
+      // Restore overflow behavior
+      document.documentElement.style.overflow = "";
+      document.body.style.overflow = "";
+
+      // Re-enable touch scroll on mobile devices
+      if (this.#preventScrollHandler) {
+        document.removeEventListener("touchmove", this.#preventScrollHandler);
+      }
+    } catch (error) {
+      console.warn("Error enabling scroll:", error);
+    }
+  }
 }
 
 export default Navigation;

views/components/nav-main__toggle.php

@@ -13,6 +13,7 @@ $navIcon = isset( get_field( 'header', 'option' )['nav_icon'] ) ? get_field( 'he
 
 // Generate toggle classes
 $toggleClasses = array( 'nav-main__toggle' );
+
 if ( $navIcon ) {
 	$toggleClasses[] = 'custom-icon';
 }
@@ -29,17 +30,18 @@ if ( $navIcon ) {
 	<?php else : ?>
 		<!-- Hamburger Icon -->
 		<span class="nav-toggle-icon nav-toggle-hamburger">
-			<svg class="text-current fill-current" viewBox="0 0 100 80" width="40" height="40">
+			<svg class="text-current fill-[#1A2A45]" viewBox="0 0 100 60" width="40" height="40">
 				<rect y="0"  width="100" height="15"></rect>
 				<rect y="30" width="100" height="15"></rect>
 				<rect y="60" width="100" height="15"></rect>
 			</svg>
 		</span>
-		<!-- X Icon -->
+
+        <!-- X Icon -->
 		<span class="nav-toggle-icon nav-toggle-x">
-			<svg class="text-current stroke-current" viewBox="0 0 100 80" width="40" height="40">
+			<svg class="text-current stroke-[#1A2A45]" viewBox="0 0 100 100" width="40" height="40">
-				<line x1="20" y1="20" x2="80" y2="60" stroke-width="15" stroke-linecap="round" />
+				<line x1="15" y1="15" x2="85" y2="85" stroke-width="15" stroke-linecap="round" />
-				<line x1="80" y1="20" x2="20" y2="60" stroke-width="15" stroke-linecap="round" />
+				<line x1="85" y1="15" x2="15" y2="85" stroke-width="15" stroke-linecap="round" />
 			</svg>
 		</span>
 	<?php endif; ?>