Skip to content

Commit

Permalink
active state
Browse files Browse the repository at this point in the history
  • Loading branch information
@mmmavis
mmmavis committed Feb 26, 2024
1 parent 2575cf4 commit 5dedb41
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 36 deletions.
2 changes: 1 addition & 1 deletion network-api/networkapi/templates/fragments/primary_nav.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div class="tw-container" role="navigation">
<div class="tw-row">
<div class="tw-flex-grow tw-max-w-full tw-flex-1">
<div class="nav-links pt-3">
<div class="nav-links">
{% block narrow_screen_nav_links %}
<div><a class="{% primary_active_nav request menu_root.full_url menu_root.full_url %}" href="{{ menu_root.url }}">{% trans "Home" %}</a></div>
{% include "fragments/prototype_nav_links_mobile.html" %}
Expand Down
2 changes: 1 addition & 1 deletion network-api/networkapi/templates/fragments/prototype_nav_links.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script type="text/template" id="prototype-nav-links-template">
<% _.each(navItems, function(navItem, index) { %>
<div class="nav-item-wrapper tw-inline-block tw-group">
<a class="primary tw-capitalize" href="<%= navItem.url %>" data-name="<%= navItem.name %>"><%= navItem.name %></a>
<a class="tw-primary-nav tw-capitalize" href="<%= navItem.url %>" data-name="<%= navItem.name %>"><%= navItem.name %></a>
<div class="submenu tw-nav-submenu tw-z-40 tw-container tw-invisible tw-opacity-0 tw-transition tw-duration-250 group-hover:tw-visible group-focus:tw-visible group-focus-visible:tw-visible group-focus-within:tw-visible group-hover:tw-opacity-100 group-focus:tw-opacity-100 group-focus-visible:tw-opacity-100 group-focus-within:tw-opacity-100 tw-absolute tw-top-[calc(100%+16px)] tw-left-0">
<div class="tw-row <% if (index >= 3) { %>tw-justify-end<% } %>">
<div class="tw-w-<%= navItem.totalDesktopColumnSpan %>/4 tw-grid tw-grid-cols-<%= navItem.totalDesktopColumnSpan %> tw-border tw-bg-white tw-border-gray-20 ">
Expand Down
6 changes: 3 additions & 3 deletions network-api/networkapi/templates/fragments/prototype_nav_links_mobile.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<script type="text/template" id="prototype-nav-links-mobile-template">
<% _.each(navItems, function(navItem, index) { %>
<div class="nav-item-wrapper tw-px-8 tw-block tw-group tw-border-b tw-border-gray-20">
<button class="tw-primary-nav tw-capitalize tw-text-[20px] tw-px-0 tw-py-12 tw-w-full tw-text-left tw-bg-transparent hover:tw-bg-transparent" aria-expanded="false" href="<%= navItem.url %>" data-name="<%= navItem.name %>"><%= navItem.name %></button>
<div class="nav-item-wrapper tw-px-8 tw-block tw-group tw-border-b tw-border-b-gray-20" data-name="<%= navItem.name %>">
<button class="tw-primary-nav tw-capitalize tw-text-[20px] tw-px-0 tw-py-12 tw-w-full tw-text-left tw-bg-transparent hover:tw-bg-transparent" aria-expanded="false" href="<%= navItem.url %>"><%= navItem.name %></button>
<div class="submenu tw-nav-submenu tw-overflow-hidden tw-transition-all tw-duration-500">
<div class="tw-row <% if (index >= 3) { %>tw-justify-end<% } %>">
<div class="tw-w-full">
Expand Down Expand Up @@ -31,7 +31,7 @@ <h2 class="{{ heading_class }}"><%= section.title %></h2>
<% } %>
</a>
<% if (link.description) { %>
<p class="tw-text-gray-80 tw-text-sm"><%= link.description %></p>
<p class="tw-text-gray-80 tw-text-sm tw-hidden small:tw-block"><%= link.description %></p>
<% } %>
</li>
<% }); %>
Expand Down
77 changes: 58 additions & 19 deletions source/js/common/prototype-main-nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,41 +27,52 @@ class WidePrimaryNav {
}

this.NAV_LINKS_WRAPPER.querySelector(
`a.primary[data-name="${navData.primaryNavLookUp[currentPath]}"]`
`.tw-primary-nav[data-name="${navData.primaryNavLookUp[currentPath]}"]`
).classList.add(this.LINK_ACTIVE_CLASS);
}

grayOutAllLinks(grayOut = false, onHoverLink = null) {
this.NAV_LINKS_WRAPPER.querySelectorAll("a.primary").forEach((link) => {
if (link === onHoverLink) {
return;
this.NAV_LINKS_WRAPPER.querySelectorAll("a.tw-primary-nav").forEach(
(link) => {
if (link === onHoverLink) {
return;
}

if (grayOut) {
link.classList.add(this.LINK_GRAYED_OUT_CLASS);
} else {
link.classList.remove(this.LINK_GRAYED_OUT_CLASS);
}
}

if (grayOut) {
link.classList.add(this.LINK_GRAYED_OUT_CLASS);
} else {
link.classList.remove(this.LINK_GRAYED_OUT_CLASS);
}
});
);
}

setEventHandlers() {
this.NAV_LINKS_WRAPPER.querySelectorAll(".nav-item-wrapper").forEach(
(wrapper) => {
wrapper.addEventListener("mouseenter", () => {
this.grayOutAllLinks(true, wrapper.querySelector("a.primary"));
this.grayOutAllLinks(true, wrapper.querySelector("a.tw-primary-nav"));
});

wrapper.addEventListener("focusin", () => {
this.grayOutAllLinks(true, wrapper.querySelector("a.primary"));
this.grayOutAllLinks(
true,
wrapper.querySelector("a.primatw-primary-navry")
);
});

wrapper.addEventListener("mouseleave", () => {
this.grayOutAllLinks(false, wrapper.querySelector("a.primary"));
this.grayOutAllLinks(
false,
wrapper.querySelector("a.tw-primary-nav")
);
});

wrapper.addEventListener("focusout", () => {
this.grayOutAllLinks(false, wrapper.querySelector("a.primary"));
this.grayOutAllLinks(
false,
wrapper.querySelector("a.tw-primary-nav")
);
});
}
);
Expand All @@ -87,7 +98,30 @@ class NarrowPrimaryNav extends WidePrimaryNav {
);
}

setActiveNavLink() {}
setActiveNavLink() {
const currentPath = window.location.pathname;

if (currentPath === "/" || currentPath === "/en/") {
return;
}

let activeNavSection = this.NAV_LINKS_WRAPPER.querySelector(
`.nav-item-wrapper[data-name="${navData.primaryNavLookUp[currentPath]}"]`
);

if (!activeNavSection) {
return;
}

activeNavSection.classList.add(this.LINK_ACTIVE_CLASS);
activeNavSection
.querySelectorAll("a.tw-secondary-nav-link")
.forEach((link) => {
if (link.getAttribute("href") === window.location.pathname) {
link.classList.add(this.LINK_ACTIVE_CLASS);
}
});
}

slide(element, direction = "down") {
if (direction === "down") {
Expand Down Expand Up @@ -115,12 +149,17 @@ class NarrowPrimaryNav extends WidePrimaryNav {
);
}

init(data) {
this.renderCompiledTemplate(data);
this.setEventHandlers();
collapseAllSubmenus() {
this.NAV_LINKS_WRAPPER.querySelectorAll(".submenu").forEach((submenu) => {
this.slide(submenu, "up");
});
}

init(data) {
this.renderCompiledTemplate(data);
this.setEventHandlers();
this.setActiveNavLink();
this.collapseAllSubmenus();

console.log(data);
}
Expand Down
28 changes: 16 additions & 12 deletions source/sass/components/primary-nav.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@
}
}

a.primary {
.tw-primary-nav {
font-size: 17px;
line-height: calc(23 / 17);
border-bottom: 6px solid transparent;
Expand Down Expand Up @@ -152,6 +152,20 @@
}
}

.narrow-screen-menu-container .nav-links {
.nav-item-wrapper {
&.active {
border-left: 4px $black solid;
}

.tw-secondary-nav-link {
&.active {
text-decoration: underline;
}
}
}
}

.wrapper-burger {
transition: background 200ms ease-in-out;
background: $white;
Expand Down Expand Up @@ -261,7 +275,7 @@

.narrow-screen-menu {
position: fixed;
top: 64px;
top: 65px;
bottom: 0;
left: 0;
right: 0;
Expand All @@ -274,16 +288,6 @@
height: 0;
overflow: hidden;
transition: opacity 0.2s, height 0s linear 0.2s;

.nav-links {
a {
transform: translateY(8px);
}
}
}

.nav-links {
height: 100%;
}
}
}
Expand Down

0 comments on commit 5dedb41

Please sign in to comment.