[Mobile Nav] Added sliding effect and allowed multiple open accordions (

#12260)

* add sliding effect to mobile nav dropdown

* fix nav height and padding inconsistencies

* (mobile nav) allowing multiple open accordions at the same time

network-api/networkapi/templates/fragments/blocks/nav/dropdown.html

@@ -1,6 +1,6 @@
 {% load static wagtailcore_tags wagtailadmin_tags nav_tags %}
 
-{% fragment as content_base_styles %}tw-py-0 tw-px-0 tw-gap-8 tw-overflow-y-auto{% endfragment %}
+{% fragment as content_base_styles %}tw-py-0 tw-px-0 tw-gap-8 tw-overflow-y-auto tw-transition-all tw-duration-500{% endfragment %}
 {% fragment as dropdown_selector_base %}tw-flex tw-flex-row tw-items-center tw-justify-between tw-w-full tw-py-12 tw-px-8 tw-gap-4{% endfragment %}
 
 {% fragment as content_desktop %}large:tw-max-w-[1250px] xlarge:tw-max-w-[1350px] 2xl:tw-max-w-[1600px] large:tw-w-full large:tw-px-24 large:tw-hidden{% endfragment %}

network-api/networkapi/templates/fragments/nav/menu.html

@@ -4,12 +4,12 @@
 
 {% block menu_container_classes %}
     {{ block.super }}
-    large:tw-py-0 tw-bg-white tw-relative
+    tw-relative
 {% endblock menu_container_classes %}
 
 {% block narrow_screen_menu %}
     <div class="tw-bg-white tw-min-h-lvh">
-        <div class="tw-flex tw-flex-col tw-border-y-[1px] tw-border-gray-20 tw-divide-y-[1px] tw-divide-gray-20 tw-w-full" data-nav-accordion-menu>
+        <div class="tw-flex tw-flex-col tw-divide-y-[1px] tw-divide-gray-20 tw-w-full" data-nav-accordion-menu>
             {% for dropdown in menu.dropdowns %}
                 {% include_block dropdown with style="mobile" %}
             {% endfor %}
@@ -32,4 +32,4 @@
             {% include "fragments/nav/blog/blog-dropdown.html" with style="desktop" %}
         {% endif %}
     </div>
-{% endblock wide_screen_menu %}
+{% endblock wide_screen_menu %}

network-api/networkapi/templates/fragments/primary_nav.html

@@ -4,9 +4,9 @@
 {% else %}<div class="primary-nav-container">
 {% endif %}
 <div class="wrapper-burger {% block wrapper_classes %}{% endblock %}">
-    <div class="menu-container large:tw-h-40 {% block menu_container_classes %}{% endblock %}">
+    <div class="menu-container large:tw-h-40 tw-py-8 medium:tw-py-10 large:tw-py-0 {% block menu_container_classes %}{% endblock %}">
         {% block menu_content %}
-            <div class="narrow-screen-menu tw-bg-white hidden d-lg-none tw-overflow-y-auto">
+            <div class="narrow-screen-menu tw-top-[61px] medium:tw-top-[69px] tw-bg-white hidden d-lg-none tw-overflow-y-auto">
                 {% block narrow_screen_menu %}
                     <div class="narrow-screen-menu-background tw-dark">
                         <div class="narrow-screen-menu-container ">
@@ -32,9 +32,8 @@
             <div class="tw-row tw-h-full tw-justify-between large:tw-items-center">
                 <div class="col">
                     <div class="tw-flex tw-flex-row tw-justify-between large:tw-items-center">
-                        <div id="primary-nav-links" class="tw-w-full large:tw-w-auto large:tw-py-0 large:tw-items-center">
-                            <div class="tw-flex tw-items-center tw-flex-wrap ">
-
+                        <div id="primary-nav-links" class="tw-w-full tw-py-0 large:tw-w-auto large:tw-items-center">
+                            <div class="tw-flex tw-items-center tw-flex-wrap">
                                 <button class="burger tw-z-50 tw-bg-white {% if page.zen_nav is not True %} large:tw-hidden small:tw-ml-0 {% endif %}" aria-label="{% trans 'Open menu' %}">
                                     <span class="burger-bar burger-bar-top"></span>
                                     <span class="burger-bar burger-bar-middle"></span>

source/js/components/accordion/accordion.js

@@ -16,7 +16,7 @@ class Accordion {
   bindEvents() {
     this.title.addEventListener("click", (e) => {
       e.preventDefault();
-      let open = !this.content.classList.contains("tw-hidden");
+      let open = this.title.getAttribute("aria-expanded") === "true";
 
       if (open) {
         this.close();
@@ -37,14 +37,12 @@ class Accordion {
   }
 
   open() {
-    this.content.classList.remove("tw-hidden");
     this.chevron.classList.remove("tw-rotate-180");
     this.title.setAttribute("aria-expanded", "true");
     this.content.setAttribute("aria-hidden", "false");
   }
 
   close() {
-    this.content.classList.add("tw-hidden");
     this.chevron.classList.add("tw-rotate-180");
     this.title.setAttribute("aria-expanded", "false");
     this.content.setAttribute("aria-hidden", "true");

source/js/components/nav/mobile-dropdown.js

@@ -27,11 +27,6 @@ class NavMobileDropdown extends Accordion {
     this.title.classList.add("tw-border-s-4");
   }
 
-  getSiblings() {
-    let siblings = document.querySelectorAll(NavMobileDropdown.selector());
-    return Array.from(siblings).filter((sibling) => sibling !== this.accordion);
-  }
-
   bindEvents() {
     super.bindEvents();
     this.accordion.addEventListener("focus", () => {
@@ -63,30 +58,20 @@ class NavMobileDropdown extends Accordion {
   }
 
   open() {
-    super.open();
     if (this.isDropdownWayfindingActive === "true") {
       this.handleWayfindingOpenStyles();
     }
-    if (!this.siblings) {
-      this.siblings = this.getSiblings();
-    }
-    this.siblings.forEach((sibling) => {
-      const title = sibling.querySelector("[data-accordion-title]");
-      const chevron = sibling.querySelector("[data-accordion-title] img");
-      const content = sibling.querySelector("[data-accordion-content]");
-      title.setAttribute("aria-expanded", "false");
-      content.setAttribute("aria-hidden", "true");
-      content.classList.add("tw-hidden");
-      chevron.classList.add("tw-rotate-180");
-    });
-    this.title.scrollIntoView({ behavior: "smooth", block: "start" });
+
+    super.open();
+    this.content.style.height = `${this.content.scrollHeight}px`;
   }
 
   close() {
     super.close();
     if (this.isDropdownWayfindingActive === "true") {
       this.handleWayfindingClosedStyles();
     }
+    this.content.style.height = "0";
   }
 }
 

source/sass/components/primary-nav.scss

@@ -124,7 +124,9 @@
 
     .wide-screen-menu {
       line-height: $logo-height; //Tied to logo height so that the "active" page border shows up at the correct alignment consistently
+      height: auto;
       &.hidden {
+        height: 0;
         opacity: 0;
         transform: translateY(8px);
         visibility: hidden;
@@ -243,17 +245,12 @@
       left: 0;
       right: 0;
       overflow-y: auto;
-      transition:
-        opacity 0.2s,
-        height 0s;
+      height: 100vh;
+      transition: all 0.5s;
 
       &.hidden {
-        opacity: 0;
         height: 0;
         overflow: hidden;
-        transition:
-          opacity 0.2s,
-          height 0s linear 0.2s;
 
         .nav-links {
           a {