Dynamically generates the content in the mobile hamburger menu. Fixin…

…g alignment of footer secondary menu.
wri · Nov 24, 2021 · 478388c · 478388c
1 parent fc2caf1
commit 478388c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 52 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,25 +50,33 @@ 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 = "our-work-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);
     }
 
@@ -79,26 +87,15 @@ export default function(context) {
           .find(".menu--footer-secondary > ul > li > .menu-item-title")
           .on("click", function(e) {
             e.preventDefault();
-            slideOut(ourWorkSubmenu);
-          });
-        burger
-          .find(".menu--mega-menu > ul > li:nth-child(1) > .menu-item-title")
-          .on("click", function(e) {
-            e.preventDefault();
-            slideOut(aboutUsSubmenu);
+            slideOut(e);
           });
         burger
-          .find(".menu--mega-menu > ul > li:nth-child(2) > .menu-item-title")
+          .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) > .menu-item-title")
-          .on("click", function(e) {
-            e.preventDefault();
-            slideOut(joinUsSubmenu);
+            slideOut(e);
           });
+
         // Close the sliders, then reset.
         $(".hamburger-slider .back").on("click", function(e) {
           e.preventDefault();

diff --git a/themes/custom/ts_wrin/sass/global/_footer.scss b/themes/custom/ts_wrin/sass/global/_footer.scss
@@ -277,10 +277,11 @@
       @include mq($md) {
         & > ul.menu {
           display: flex;
-          justify-content: space-between;
+          justify-content: flex-start;
 
           & > li.menu-item {
-            flex-basis: 30%;
+            flex: 0 1 calc(33% - 30px);
+            margin-right: 30px;
           }
         }
       }

diff --git a/themes/custom/ts_wrin/sass/global/_ts-hamburger-menu.scss b/themes/custom/ts_wrin/sass/global/_ts-hamburger-menu.scss
@@ -584,10 +584,7 @@ body.fixed {
   left: calc(-100% - 40px);
 }
 
-.our-work-submenu,
-.about-us-submenu,
-.our-approach-submenu,
-.join-us-submenu {
+.hamburger-slider-contents {
   background-color: $black;
   display: none;
   padding: $space-xs;
@@ -623,17 +620,17 @@ body.fixed {
   }
 }
 
-.our-work-submenu {
+.hamburger-slider-contents {
   & > ul.menu > li {
     @include font-line-height(24, 30);
     font-weight: 600;
   }
-  & > ul.menu > li > .menu-item-title a {
+  & > ul.menu > li > .menu-item-title {
     display: block;
     margin-bottom: $space-xs;
     position: relative;
   }
-  & > ul li > ul span {
+  & > ul li > ul span span {
     @include font($caslon, "regular", "italic");
     @include font-line-height(15, 18);
     color: #b1b1b1;
@@ -651,9 +648,7 @@ body.fixed {
   }
 }
 
-.about-us-submenu nav,
-.our-approach-submenu nav,
-.join-us-submenu nav {
+.hamburger-slider-contents {
   & > ul.menu > li {
     @include font-line-height(24, 30);
     font-weight: 600;
@@ -663,7 +658,7 @@ body.fixed {
     margin-bottom: $space-xs;
     position: relative;
   }
-  & > ul li > ul span {
+  & > ul li > ul span span {
     @include font($caslon, "regular", "italic");
     @include font-line-height(15, 18);
     color: #b1b1b1;

diff --git a/themes/custom/ts_wrin/templates/layout/region--hamburger-nav.html.twig b/themes/custom/ts_wrin/templates/layout/region--hamburger-nav.html.twig
@@ -37,21 +37,9 @@
     {{ content }}
   </div>
   <div class="hamburger-slider">
-    <div class="our-work-submenu">
+    <div class="hamburger-slider-contents">
       <a href="#" class="back">{{ "Back"|t }}</a>
-      {{ drupal_menu('footer-secondary') }}
-    </div>
-    <div class="about-us-submenu">
-      <a href="#" class="back">{{ "Back"|t }}</a>
-        {{ drupal_block('menu_block:mega-menu', {level: 1, depth: 1, parent: 'mega-menu:menu_link_content:4ed8cbfc-ce46-4255-bbbc-629aabcf7caf', render_parent: true, label_display: "0", label: "About Us"}) }}
-    </div>
-    <div class="our-approach-submenu">
-      <a href="#" class="back">{{ "Back"|t }}</a>
-        {{ drupal_block('menu_block:mega-menu', {level: 1, depth: 1, parent: 'mega-menu:menu_link_content:440342dd-bcc9-44d2-a414-4e7fadd32439', render_parent: true, label_display: "0", label: "Our approach"}) }}
-    </div>
-    <div class="join-us-submenu">
-      <a href="#" class="back">{{ "Back"|t }}</a>
-        {{ drupal_block('menu_block:mega-menu', {level: 1, depth: 1, parent: 'mega-menu:menu_link_content:cd17726d-72ed-4523-80e1-12585c5ebfcc', render_parent: true, label_display: "0", label: "Join Us"}) }}
+      <ul class="menu"></ul>
     </div>
   </div>
 </div>