Merge pull request #29 from wri/menu-styling-fixes

Menu styling fixes
wri · Nov 29, 2021 · 301ba22 · 301ba22
2 parents 803b6c8 + 5fa58e8
commit 301ba22
Show file tree

Hide file tree

Showing 7 changed files with 11,119 additions and 562 deletions.
diff --git a/themes/custom/ts_wrin/js/components/ts_header_nav.js b/themes/custom/ts_wrin/js/components/ts_header_nav.js
@@ -50,55 +50,52 @@ export default function(context) {
     // Mega-Menu sliders.
     var hamburgerContent = $(".hamburger-content"),
       hamburgerSlider = $(".hamburger-slider"),
-      ourWorkSubmenu = $(".our-work-submenu"),
-      aboutUsSubmenu = $(".about-us-submenu"),
-      ourApproachSubmenu = $(".our-approach-submenu"),
-      joinUsSubmenu = $(".join-us-submenu");
+      flexibleRowsClass = "flexible-row-submenu";
 
-    function slideOut(menuName) {
-      menuName.addClass("active");
+    function slideOut(menuParent) {
+      var clone = $(menuParent.target)
+        .parents("li")
+        .clone();
+      $(".hamburger-slider-contents ul", hamburgerSlider).html(clone);
+      $(".hamburger-slider-contents").addClass("active");
+      // Hack to get the our-work link to have flexed rows.
+      if (
+        $(menuParent.target).hasClass(flexibleRowsClass) ||
+        $(menuParent.target)
+          .children("a")
+          .hasClass(flexibleRowsClass)
+      ) {
+        $(".hamburger-slider-contents").addClass(flexibleRowsClass);
+      }
       hamburgerContent.addClass("left");
       hamburgerSlider.addClass("active");
     }
 
     function sliderCleanUp() {
       hamburgerContent.removeClass("left");
       hamburgerSlider.removeClass("active");
+      $(".hamburger-slider-contents").removeClass(flexibleRowsClass);
       setTimeout(function() {
-        ourWorkSubmenu.removeClass("active");
-        aboutUsSubmenu.removeClass("active");
-        ourApproachSubmenu.removeClass("active");
-        joinUsSubmenu.removeClass("active");
+        $(".hamburger-slider-contents ul", hamburgerSlider).html("");
       }, 500);
     }
 
     function sliderMenus(windowWidth) {
       if (windowWidth <= 768) {
         var burger = $(".hamburger-content");
         burger
-          .find(".menu--footer-secondary > ul > li > a")
-          .on("click", function(e) {
-            e.preventDefault();
-            slideOut(ourWorkSubmenu);
-          });
-        burger
-          .find(".menu--mega-menu > ul > li:nth-child(1) > a")
+          .find(".menu--footer-secondary > ul > li > .menu-item-title")
           .on("click", function(e) {
             e.preventDefault();
-            slideOut(aboutUsSubmenu);
+            slideOut(e);
           });
         burger
-          .find(".menu--mega-menu > ul > li:nth-child(2) > a")
+          .find(".menu--mega-menu > ul > li > .menu-item-title")
           .on("click", function(e) {
             e.preventDefault();
-            slideOut(ourApproachSubmenu);
-          });
-        burger
-          .find(".menu--mega-menu > ul > li:nth-child(3) > a")
-          .on("click", function(e) {
-            e.preventDefault();
-            slideOut(joinUsSubmenu);
+            slideOut(e);
           });
+
         // Close the sliders, then reset.
         $(".hamburger-slider .back").on("click", function(e) {
           e.preventDefault();