diff --git a/static/js/src/core.js b/static/js/src/core.js
index eaac58094d..1766ba5bb7 100755
--- a/static/js/src/core.js
+++ b/static/js/src/core.js
@@ -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",
+});
diff --git a/static/js/src/navigation.js b/static/js/src/navigation.js
index 8f2ed2406b..e8f224d83e 100644
--- a/static/js/src/navigation.js
+++ b/static/js/src/navigation.js
@@ -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");
@@ -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);
@@ -197,31 +193,24 @@ function toggleSection(e) {
@param {HTMLNode} dropdown
*/
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"
);
@@ -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"
);
@@ -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);
@@ -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);
@@ -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 = `
+ 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 = `
`;
- 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();
@@ -594,7 +600,7 @@ if (accountContainer) {
.then((response) => response.json())
.then((data) => {
if (data.account === null) {
- accountContainer.innerHTML = `Sign-in`;
+ accountContainer.innerHTML = `Sign-in `;
} else {
window.accountJSONRes = data.account;
accountContainer.innerHTML = `
@@ -735,5 +741,3 @@ function addUTMToForms() {
}
}
}
-
-console.log("Mega nav built")
\ No newline at end of file
diff --git a/static/sass/_pattern_navigation.scss b/static/sass/_pattern_navigation.scss
index ed274d5a58..e576a76c9f 100644
--- a/static/sass/_pattern_navigation.scss
+++ b/static/sass/_pattern_navigation.scss
@@ -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;
}
@@ -39,7 +46,7 @@
}
}
- .p-navigation__dropdown-item {
+ li.p-navigation__dropdown-item {
line-height: 1.5rem;
margin: 0;
padding-bottom: 0.25rem;
@@ -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;
@@ -128,6 +140,7 @@
.p-navigation__nav .p-navigation__items {
display: inline-flex;
}
+
.p-navigation__search {
align-items: center;
background-color: #262626;
@@ -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;
@@ -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;
@@ -320,5 +337,11 @@
& ~ .global-nav-dropdown {
top: 2.1rem !important;
}
+
+ @media (min-width: $breakpoint-navigation-threshold - 1) {
+ #all-canonical-content-mobile {
+ display: none;
+ }
+ }
}
}
diff --git a/static/sass/styles.scss b/static/sass/styles.scss
index 4e943fa06c..150b7d07b7 100644
--- a/static/sass/styles.scss
+++ b/static/sass/styles.scss
@@ -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;
- }
-}