Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 9 commits into from
May 2, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
45762ae
desktop dropdown animation
mmmavis Apr 26, 2024
2dd3742
add sliding effect to mobile nav dropdown
mmmavis Apr 30, 2024
a94a12f
fix nav height and padding inconsistencies
mmmavis Apr 30, 2024
83ecfe5
Merge branch 'main' into feature/main-nav/animation
mmmavis Apr 30, 2024
3f77dfb
zen mode fix
mmmavis May 1, 2024
90fac32
remove 'snap to top' effect for mobile nav
mmmavis May 1, 2024
2313d23
improved effect for opening/closing mobile nav
mmmavis May 1, 2024
432b499
revert changes for desktop
mmmavis May 1, 2024
ebb53d2
(mobile nav) allowing multiple open accordions at the same time
mmmavis May 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion network-api/networkapi/templates/fragments/blocks/nav/dropdown.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 %}
Expand Down
6 changes: 3 additions & 3 deletions network-api/networkapi/templates/fragments/nav/menu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %}
Expand All @@ -32,4 +32,4 @@
{% include "fragments/nav/blog/blog-dropdown.html" with style="desktop" %}
{% endif %}
</div>
{% endblock wide_screen_menu %}
{% endblock wide_screen_menu %}
9 changes: 4 additions & 5 deletions network-api/networkapi/templates/fragments/primary_nav.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ">
Expand All @@ -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>
Expand Down
4 changes: 1 addition & 3 deletions source/js/components/accordion/accordion.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
robdivincenzo marked this conversation as resolved.
Show resolved Hide resolved

if (open) {
this.close();
Expand All @@ -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");
Expand Down
23 changes: 4 additions & 19 deletions source/js/components/nav/mobile-dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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", () => {
Expand Down Expand Up @@ -63,30 +58,20 @@ class NavMobileDropdown extends Accordion {
}

open() {
super.open();
robdivincenzo marked this conversation as resolved.
Show resolved Hide resolved
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";
}
}

Expand Down
11 changes: 4 additions & 7 deletions source/sass/components/primary-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
robdivincenzo marked this conversation as resolved.
Show resolved Hide resolved
&.hidden {
height: 0;
opacity: 0;
transform: translateY(8px);
visibility: hidden;
Expand Down Expand Up @@ -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 {
Expand Down
Loading