From 478388cbe89f6f2763e2cd4784c08836ea39d754 Mon Sep 17 00:00:00 2001 From: Maria Fisher Date: Wed, 24 Nov 2021 15:09:12 -0800 Subject: [PATCH] Dynamically generates the content in the mobile hamburger menu. Fixing alignment of footer secondary menu. --- .../ts_wrin/js/components/ts_header_nav.js | 47 +++++++++---------- .../custom/ts_wrin/sass/global/_footer.scss | 5 +- .../sass/global/_ts-hamburger-menu.scss | 17 +++---- .../layout/region--hamburger-nav.html.twig | 16 +------ 4 files changed, 33 insertions(+), 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 index f75f3ed31..36144fcb0 100644 --- a/themes/custom/ts_wrin/js/components/ts_header_nav.js +++ b/themes/custom/ts_wrin/js/components/ts_header_nav.js @@ -50,13 +50,23 @@ 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"); } @@ -64,11 +74,9 @@ export default function(context) { 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 index 9b67c6363..d8942f9c6 100644 --- 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 index 9e91e80f1..05fb11054 100644 --- 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 index 0d94f120f..a0a887c4d 100644 --- 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 }}
-
+
{{ "Back"|t }} - {{ drupal_menu('footer-secondary') }} -
-
- {{ "Back"|t }} - {{ 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"}) }} -
-
- {{ "Back"|t }} - {{ 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"}) }} -
-
- {{ "Back"|t }} - {{ 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"}) }} +