Skip to content

Commit

Permalink
Implement new global nav for mobile view
Browse files Browse the repository at this point in the history
  • Loading branch information
@petesfrench
petesfrench committed Jul 25, 2023
1 parent f744fda commit 70472d8
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 60 deletions.
6 changes: 5 additions & 1 deletion static/js/src/core.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,4 +4,8 @@ import { createNav } from "@canonical/global-nav";
// Initalise the cookie policy notification.
cookiePolicy();

createNav({ breakpoint: 1150, mobileContainerSelector: ".global-nav-mobile", desktopContainerSelector: ".global-nav-desktop"});
createNav({
breakpoint: 1150,
mobileContainerSelector: ".global-nav-mobile",
desktopContainerSelector: ".global-nav-desktop",
});
74 changes: 39 additions & 35 deletions static/js/src/navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ const topLevelNavDropdowns = Array.from(
".p-navigation__item--dropdown-toggle:not(.global-nav__dropdown-toggle):not(.js-back)"
)
);
console.log("topLevelNaDropdowns",topLevelNavDropdowns)
const nav = navigation.querySelector(".js-show-nav");
const menuButtons = document.querySelectorAll(".js-menu-button");
const skipLink = document.querySelector(".p-link--skip");
Expand Down Expand Up @@ -149,17 +148,14 @@ function toggleSecondaryMobileNavDropdown(event) {
}

function handleDropdownClick(clickedDropdown) {
console.log("handleDropdownClick, ", clickedDropdown)
const isActive = clickedDropdown.classList.contains("is-active");
updateNavMenu(clickedDropdown, !isActive);
setTabindex(clickedDropdown.querySelector("ul.p-navigation__dropdown"));
}

function goBackOneLevel(e, backButton) {
console.log("backButton", backButton)
e.preventDefault();
const target = backButton.parentNode.parentNode;
console.log(target)
target.setAttribute("aria-hidden", true);
toggleIsActiveState(backButton.closest(".is-active"), false);
toggleIsActiveState(backButton.closest(".is-active"), false);
Expand Down Expand Up @@ -197,31 +193,24 @@ function toggleSection(e) {
@param {HTMLNode} dropdown <li class="p-navigation__item--dropdown-toggle">
*/
function updateNavMenu(dropdown, show) {
console.log("in updateNavMenu", dropdown)
let dropdownContent = document.getElementById(dropdown.id + "-content");
let dropdownContentMobile = document.getElementById(
dropdown.id + "-content-mobile"
);
let isAccountDropdown = dropdown.classList.contains("js-account");
console.log(dropdown.id)
updateAccountDropdown(dropdown, isAccountDropdown);

console.log(dropdownContentMobile, dropdownContent)
if ((dropdownContent && dropdownContentMobile) || isAccountDropdown) {
console.log("updateNavMenu first if")
if (!show) updateDropdownStates(dropdown, show, ANIMATION_DELAY);
else updateDropdownStates(dropdown, show);
if (isAccountDropdown) show = false;
toggleDropdownWindowAnimation(show);
} else if (dropdownContentMobile) {
console.log("updateNavMenu second if")

updateMobileDropdownState(dropdown, show);
}
}

function updateDropdownStates(dropdown, show, delay) {
console.log("updateDropdownStates", dropdown, show)
let isNested = dropdown.parentNode.classList.contains(
"p-navigation__dropdown"
);
Expand All @@ -238,7 +227,6 @@ function updateDropdownStates(dropdown, show, delay) {
}

function updateDesktopDropdownStates(dropdown, show, delay) {
console.log(dropdown.id, show)
let dropdownContent = document.getElementById(
dropdown.dataset.id + "-content"
);
Expand All @@ -253,7 +241,7 @@ function updateDesktopDropdownStates(dropdown, show, delay) {

function updateMobileDropdownState(dropdown, show, isNested) {
let dropdownContentMobile = document.getElementById(
dropdown.dataset.id + "-content-mobile"
dropdown.id + "-content-mobile"
);
if (dropdownContentMobile) {
dropdownContentMobile.setAttribute("aria-hidden", !show);
Expand Down Expand Up @@ -311,7 +299,9 @@ function toggleDropdownWindowAnimation(show) {

function toggleGlobalNavVisibility(dropdown, show, delay) {
const globalNavContent = dropdown.querySelector(".global-nav-dropdown");
const globalNavInnerContent = dropdown.querySelector(".global-nav-dropdown__content");
const globalNavInnerContent = dropdown.querySelector(
".global-nav-dropdown__content"
);
if (show) {
globalNavInnerContent.classList.remove("u-hide");
globalNavInnerContent.setAttribute("aria-hidden", !show);
Expand Down Expand Up @@ -557,31 +547,47 @@ const searchButtons = document.querySelectorAll(".js-search-button");
const overlay = document.querySelector(".p-navigation__search-overlay");
initNavigationSearch();

// Setuo global-nav
// Setup global-nav
function setUpGlobalNav() {
const globalNavTab = document.querySelector(".global-nav-mobile");
const globalNavMainTabs = globalNavTab.querySelector("ul.p-navigation__items");
globalNavMainTabs.classList.remove("p-navigation__items");
globalNavMainTabs.classList.add("p-navigation__dropdown", "dropdown-content-mobile");
globalNavMainTabs.setAttribute("id", "all-canonical-content-mobile");
const globalNavMobileDropdowns = globalNavTab.querySelectorAll(".p-navigation__dropdown");
globalNavMobileDropdowns.forEach((dropdown) => {
console.log(dropdown.id)
const tempHTMLContainer = document.createElement('div');
tempHTMLContainer.innerHTML = `<li class="p-navigation__item--dropdown-close" id="${dropdown.id}-back">
const globalNavMainTab = globalNavTab.querySelector("ul.p-navigation__items");
globalNavMainTab.classList.replace(
"p-navigation__items",
"p-navigation__dropdown",
"dropdown-content-mobile"
);
globalNavMainTab.setAttribute("id", "all-canonical-content-mobile");

globalNavTab
.querySelectorAll(".p-navigation__dropdown")
.forEach((dropdown) => {
const dropdownToggle = dropdown.closest(
".p-navigation__item--dropdown-toggle"
);
if (dropdownToggle.getAttribute("role") != "menuitem") {
const newDropdownId = `all-canonical-${dropdown.id}`;
dropdown.setAttribute("id", `${newDropdownId}-content-mobile`);
dropdownToggle.setAttribute("id", newDropdownId);
dropdownToggle
.querySelector("a.p-navigation__link")
.setAttribute("href", `#${newDropdownId}-content-mobile`);
dropdownToggle.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
handleDropdownClick(dropdownToggle);
});
}
const tempHTMLContainer = document.createElement("div");
tempHTMLContainer.innerHTML = `<li class="p-navigation__item--dropdown-close" id="${dropdown.id}-back">
<button class="p-navigation__link js-back" href="${dropdown.id}" aria-controls="${dropdown.id}" tabindex="-1" onclick="event.stopPropagation()">
Back
</button>
</li>`;
const backButton = tempHTMLContainer.firstChild.cloneNode(true);
attachBackButtonEventListener(backButton.querySelector(".js-back"));
dropdown.prepend(backButton);
dropdown.addEventListener("click", (e) => {
e.stopPropagation()
handleDropdownClick(dropdown);
const backButton = tempHTMLContainer.firstChild.cloneNode(true);
attachBackButtonEventListener(backButton.querySelector(".js-back"));
dropdown.prepend(backButton);
dropdown.setAttribute("aria-hidden", "true");
});
dropdown.setAttribute("aria-hidden", "true");
})
}
document.addEventListener("DOMContentLoaded", () => {
setUpGlobalNav();
Expand All @@ -594,7 +600,7 @@ if (accountContainer) {
.then((response) => response.json())
.then((data) => {
if (data.account === null) {
accountContainer.innerHTML = `<a href="/login" class="p-navigation__link" style="padding-right: 1rem;" tabindex="0" onclick="event.stopPropagation()">Sign-in<i class="p-icon--user is-light"></i></a>`;
accountContainer.innerHTML = `<a href="/login" class="p-navigation__link" style="padding-right: 1rem;" tabindex="0" onclick="event.stopPropagation()">Sign-in&nbsp;<i class="p-icon--user is-light"></i></a>`;
} else {
window.accountJSONRes = data.account;
accountContainer.innerHTML = `<button href="#" class="p-navigation__link is-signed-in" aria-controls="canonical-login-content-mobile" aria-expanded="false" aria-haspopup="true">Account&nbsp;<i class="p-icon--user is-light">${data.account.fullname}</i></button>
Expand Down Expand Up @@ -735,5 +741,3 @@ function addUTMToForms() {
}
}
}

console.log("Mega nav built")
51 changes: 37 additions & 14 deletions static/sass/_pattern_navigation.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,13 @@
}
}

#all-canonical-mobile .global-nav__header-link-anchor::after {
@media (max-width: $breakpoint-small) {
right: 1rem !important;
top: 1.25rem !important;
}
}

.global-nav-desktop .global-nav-dropdown {
top: 0;
}
Expand Down Expand Up @@ -39,7 +46,7 @@
}
}

.p-navigation__dropdown-item {
li.p-navigation__dropdown-item {
line-height: 1.5rem;
margin: 0;
padding-bottom: 0.25rem;
Expand All @@ -53,6 +60,11 @@
}
}

a.p-navigation__dropdown-item {
padding-bottom: 0.75rem;
padding-top: 0.75rem;
}

.p-navigation__item--dropdown-toggle {
.p-muted-heading {
padding-left: 3rem;
Expand Down Expand Up @@ -128,6 +140,7 @@
.p-navigation__nav .p-navigation__items {
display: inline-flex;
}

.p-navigation__search {
align-items: center;
background-color: #262626;
Expand All @@ -147,16 +160,6 @@
}
}

@media (max-width: $breakpoint-navigation-threshold) {
.p-navigation--sliding.is-reduced.has-menu-open {
.p-navigation__row {
.p-navigation__nav {
background-color: #111;
}
}
}
}

.p-navigation.is-secondary {
z-index: 9;

Expand All @@ -173,15 +176,29 @@
}

.p-navigation__tagged-logo {
min-width: 15.7rem;
min-width: 17.4rem;
}
}

.p-navigation--sliding.is-reduced {
@extend %small-text;

margin-bottom: 0;

.p-navigation__banner {
height: 2.5rem;
padding-left: 1.5rem;
@media (min-width: $breakpoint-navigation-threshold) {
height: 2rem;
padding-left: 3rem;
width: 24%;
}
}

.p-navigation__tagged-logo {
.p-navigation__link {
padding-top: 0.5rem;
}
}

.p-navigation__user {
.p-navigation__link span {
display: none;
Expand Down Expand Up @@ -320,5 +337,11 @@
& ~ .global-nav-dropdown {
top: 2.1rem !important;
}

@media (min-width: $breakpoint-navigation-threshold - 1) {
#all-canonical-content-mobile {
display: none;
}
}
}
}
10 changes: 0 additions & 10 deletions static/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1331,13 +1331,3 @@ hr.p-separator.is-shallow {
width: auto;
}
}
.is-reduced .global-nav__header-link-anchor::after {
top: 0.5rem !important;
}

#all-canonical-mobile .global-nav__header-link-anchor::after {
@media (max-width: $breakpoint-small) {
right: 1rem !important;
top: 1.25rem !important;
}
}

0 comments on commit 70472d8

Please sign in to comment.