From dd6403bee08ee222f911a0b9c488ae3f1c5dc0a5 Mon Sep 17 00:00:00 2001
From: Lindsay Allison <lindsayallison@macbook-pro.mynetworksettings.com>
Date: Tue, 8 Apr 2025 11:07:08 -0400
Subject: [PATCH] Search and mobile nav menu transitions using css instead of
 jquery slideToggle

---
 .../defense360/assets/_js/mobile-menu.js      | 67 ++++++++++---------
 .../assets/_scss/layout/_header.scss          | 37 ++++++++--
 2 files changed, 67 insertions(+), 37 deletions(-)

diff --git a/wp-content/themes/defense360/assets/_js/mobile-menu.js b/wp-content/themes/defense360/assets/_js/mobile-menu.js
index efd8091..2e35d07 100644
--- a/wp-content/themes/defense360/assets/_js/mobile-menu.js
+++ b/wp-content/themes/defense360/assets/_js/mobile-menu.js
@@ -3,41 +3,42 @@
  * Toggles the mobile menu and the search bar
  */
 
-( function( $ ) {
-	var width = $(window).width();
-	// Click on menu icon to toggle menu classes
-	$(".header-mobileContainer").click(function() {
-		$(".navigation-container").slideToggle('fast');
-		$("body, .site-header").toggleClass("menu-mobile-active");
-		$(".header-mobileContainer .icon-menu").toggle();
-		$(".header-mobileContainer .close-icon").toggle();
+(function ($) {
+  var width = $(window).width()
 
-		// Hide Search
-		$(".header-searchFormContainer").hide();
-		$(".header-searchContainer .icon-search").show();
-		$(".header-searchContainer .close-icon").hide();
-	});
+  // Click on menu icon to toggle menu classes
+  $('.header-mobileContainer').click(function () {
+    $('.navigation-container').toggleClass('active')
+    $('body, .site-header').toggleClass('menu-mobile-active')
+    $('.header-mobileContainer .icon-menu').toggle()
+    $('.header-mobileContainer .close-icon').toggle()
 
-	// Toggle Search
-	$(".header-searchContainer .icon-search, .nav-searchIconContainer .icon-search, .search-closeContainer .close-icon, .header-searchContainer .close-icon").click(function() {
+    // Hide Search by removing the active class
+    $('.header-searchFormContainer').removeClass('active')
+    $('.header-searchContainer .icon-search').show()
+    $('.header-searchContainer .close-icon').hide()
+  })
 
-		if(width < 770) {
-			// Hide Menu
-			$(".navigation-container").hide();
-			$("body, .site-header").removeClass("menu-mobile-active");
-			$(".header-mobileContainer .icon-menu").show();
-			$(".header-mobileContainer .close-icon").hide();
-		}
+  // Toggle Search
+  $(
+    '.header-searchContainer .icon-search, .nav-searchIconContainer .icon-search, .search-closeContainer .close-icon, .header-searchContainer .close-icon'
+  ).click(function () {
+    if (width < 770) {
+      // Hide Menu
+      $('.navigation-container').removeClass('active')
+      $('body, .site-header').removeClass('menu-mobile-active')
+      $('.header-mobileContainer .icon-menu').show()
+      $('.header-mobileContainer .close-icon').hide()
+    }
 
-		// Show Search
-		$(".header-searchFormContainer").slideToggle("fast");
-		$(".header-searchContainer .icon-search").toggle();
-		$(".header-searchContainer .close-icon").toggle();
-		$(".header-searchInputContainer .search-field").focus();
-	});
+    // Toggle search form appearance via its CSS active class
+    $('.header-searchFormContainer').toggleClass('active')
+    $('.header-searchContainer .icon-search').toggle()
+    $('.header-searchContainer .close-icon').toggle()
+    $('.header-searchInputContainer .search-field').focus()
+  })
 
-	window.addEventListener('resize', function(event){
-	  width = $(window).width();
-	});
-
-} )( jQuery );
\ No newline at end of file
+  $(window).on('resize', function () {
+    width = $(window).width()
+  })
+})(jQuery)
diff --git a/wp-content/themes/defense360/assets/_scss/layout/_header.scss b/wp-content/themes/defense360/assets/_scss/layout/_header.scss
index 2d94d6c..92fe69d 100644
--- a/wp-content/themes/defense360/assets/_scss/layout/_header.scss
+++ b/wp-content/themes/defense360/assets/_scss/layout/_header.scss
@@ -8,6 +8,7 @@
 ==============================*/
 
 header.site-header {
+	position: relative;
 	z-index: 50;
 	width: 100%;
 	margin-bottom: 2rem;
@@ -131,10 +132,23 @@ header.site-header {
 
 	/*----------  Navigation  ----------*/
 	.navigation-container {
-		display: none;
+		position: absolute;
+		top: 100%;
+		left: 0;
+		width: 100%;
+		overflow: hidden;
+		transform: scaleY(0);
+		transform-origin: top;
+		transition: transform 0.3s ease;
 
 		@include breakpoint("medium") {
-			display: block;
+			position: initial;
+			transform: none;
+			transition: none;
+		}
+
+		&.active {
+			transform: scaleY(1);
 		}
 	}
 
@@ -340,6 +354,13 @@ header.site-header {
 	/*----------  Mobile Menu Styles  ----------*/
 	&.menu-mobile-active {
 		height: 100vh;
+
+		.navigation-container {
+			position: relative;
+			top: 0;
+			transform: none;
+			max-height: none;
+		}
 	}
 
 	.close-icon {
@@ -381,12 +402,14 @@ header.site-header {
 		top: 100%;
 		left: 0;
 		z-index: 10;
-		display: none;
 		width: 100%;
 		margin-top: 0;
 		padding: 1rem 0.5rem;
 		background-color: $black;
-		transition: all 0.3s ease-in-out;
+		transform: translateY(-10px);
+		visibility: hidden;
+		opacity: 0;
+		transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
 
 		@include breakpoint("medium") {
 			position: absolute;
@@ -394,6 +417,12 @@ header.site-header {
 			padding: 0.3rem 0.5rem 0.6rem;
 		}
 
+		&.active {
+			transform: translateY(0);
+			visibility: visible;
+			opacity: 1;
+		}
+
 		.header-searchForm {
 			.header-searchInputContainer {
 				padding: 0;