WD-30045 - Implement sliding navigation in snapcraft.io (#5437)

* WD-30045 - Move changes from global-nav to snapcraft.io

* WD-30045 - Navigation mobile view fixed

* WD-30045 - Navigation desktop view fixed

* WD-30045 - Pretty print dev logs

* WD-30045 - Fix SCSS linting

* WD-30045 - Fix Copilot comments

* WD-30045 - Fix bug in adding "back" buttons to global-nav

* WD-30045 - Fix margin on /docs page and other PR comments

Author: alvaromateo

entrypoint

@@ -6,6 +6,7 @@ RUN_COMMAND="gunicorn webapp.app:create_app() --bind $1 --worker-class gevent --
 
 if [ "${FLASK_DEBUG}" = true ] || [ "${FLASK_DEBUG}" = 1 ]; then
     RUN_COMMAND="${RUN_COMMAND} --reload --log-level debug --timeout 9999"
+    RUN_COMMAND="${RUN_COMMAND} --logger-class canonicalwebteam.flask_base.log_utils.GunicornDevLogger"
 fi
 
 ${RUN_COMMAND}

package.json

@@ -26,7 +26,7 @@
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
     "@canonical/cookie-policy": "3.6.5",
-    "@canonical/global-nav": "3.7.3",
+    "@canonical/global-nav": "3.8.0",
     "@canonical/react-components": "3.6.0",
     "@canonical/store-components": "0.54.2",
     "@dnd-kit/core": "6.3.1",

static/js/base/base.ts

@@ -1,4 +1,3 @@
-import "./navigation";
 import "./ga";
 import "./contactForm";
 import "./sentry";

static/js/base/global-nav.ts

@@ -0,0 +1,112 @@
+export const setActiveDropdown = (
+  dropdownToggleButton: HTMLElement,
+  isActive = true,
+) => {
+  // set active state of the dropdown toggle (to slide the panel into view)
+  const dropdownToggleEl = dropdownToggleButton.closest(
+    ".p-navigation__item--dropdown-toggle",
+  );
+  if (dropdownToggleEl) {
+    dropdownToggleEl.classList.toggle("is-active", isActive);
+    dropdownToggleEl.classList.toggle("is-selected", isActive);
+    const globalNavButton = dropdownToggleEl.querySelector(
+      ":scope > .p-navigation__link",
+    );
+    // fix some states from global-nav elements in mobile
+    if (globalNavButton) {
+      globalNavButton.setAttribute("aria-expanded", isActive.toString());
+      globalNavButton.classList.toggle("is-selected", isActive);
+    }
+  }
+
+  // set active state of the parent dropdown panel (to fade it out of view)
+  const parentLevelDropdown = dropdownToggleEl?.closest(
+    ".p-navigation__dropdown",
+  );
+  if (parentLevelDropdown) {
+    parentLevelDropdown.classList.toggle("is-active", isActive);
+  }
+
+  // set active state of the top navigation list under p-navigation__nav
+  // to set the position of the sliding panel properly
+  const topLevelNavigation = dropdownToggleButton.closest(".p-navigation__nav");
+  if (topLevelNavigation) {
+    const topLevelItems = topLevelNavigation.querySelectorAll(
+      ":scope > .p-navigation__items",
+    );
+
+    for (const item of topLevelItems) {
+      // in case there are more than one top level navigation lists, we need to
+      // mark as active the one that contains the clicked button and hide the rest
+      if (item.contains(dropdownToggleButton)) {
+        item.classList.toggle("is-active", isActive);
+      } else {
+        item.classList.toggle("u-hide", isActive);
+      }
+    }
+  }
+};
+
+export const setListFocusable = (list: Element) => {
+  // turn on focusability for all direct children in the target dropdown
+  if (list) {
+    for (const item of list.children) {
+      item.children[0].setAttribute("tabindex", "0");
+    }
+  }
+};
+
+export const setFocusable = (target: Element) => {
+  // if target dropdown is not a list, find the list in it
+  const isList =
+    target.classList.contains("p-navigation__dropdown") ||
+    target.classList.contains("p-navigation__items");
+
+  if (!isList) {
+    // find all lists in the target dropdown and make them focusable
+    target.querySelectorAll(".p-navigation__dropdown").forEach((element) => {
+      setListFocusable(element);
+    });
+  } else {
+    setListFocusable(target);
+  }
+};
+
+export const collapseDropdown = (
+  dropdownToggleButton: HTMLElement,
+  targetDropdown: HTMLElement,
+) => {
+  targetDropdown.setAttribute("aria-hidden", "true");
+  setActiveDropdown(dropdownToggleButton, false);
+};
+
+export const expandDropdown = (
+  dropdownToggleButton: HTMLElement,
+  targetDropdown: HTMLElement,
+) => {
+  setActiveDropdown(dropdownToggleButton);
+  targetDropdown.setAttribute("aria-hidden", "false");
+  setFocusable(targetDropdown);
+};
+
+const toggleAnimationPlaying = (
+  element: Element,
+  animationDuration?: number,
+) => {
+  const endAnimation = () => {
+    element.classList.toggle("js-animation-playing", false);
+  };
+  element.classList.toggle("js-animation-playing", true);
+  // force browser to flush all pending style and layout calculations immediately
+  void (element as HTMLElement).offsetWidth;
+  setTimeout(endAnimation, animationDuration);
+};
+
+export const setupAnimationStart = (
+  elements: Element[],
+  animationDuration?: number,
+) => {
+  elements.forEach((toggle: Element) => {
+    toggleAnimationPlaying(toggle.parentElement!, animationDuration);
+  });
+};

static/js/base/navigation/dropdownUtils.ts

@@ -0,0 +1,35 @@
+export function patchAllCanonicalMobileMarkup() {
+  const allCanonicalMobile = document.getElementById("all-canonical-mobile");
+  const topMobileSections = allCanonicalMobile?.querySelectorAll(
+    ".global-nav__dropdown-toggle",
+  );
+
+  topMobileSections?.forEach((section: Element) => {
+    const sectionLink = section.querySelector("button.p-navigation__link");
+    const sectionHref = sectionLink?.getAttribute("href");
+
+    const sectionLinksList = section.querySelector("ul");
+    sectionLinksList?.setAttribute("aria-hidden", "true");
+
+    // add the back button as the first item of the section
+    if (sectionHref && sectionLinksList) {
+      sectionLinksList.prepend(createBackButtonItem(sectionHref));
+    }
+  });
+}
+
+function createFromHTML(html: string) {
+  const div = window.document.createElement("div");
+  div.innerHTML = html;
+  return div.childNodes[0];
+}
+
+function createBackButtonItem(href: string) {
+  // remove the # from the href
+  const ariaControls = href.slice(1);
+  return createFromHTML(`<li class="p-navigation__item--dropdown-close">
+      <a href=${href} aria-controls=${ariaControls} class="p-navigation__link js-back-button">
+        Back
+      </a>
+    </li>`);
+}

static/js/base/navigation/globalNav.ts

@@ -0,0 +1,12 @@
+import "./login";
+
+import { createNav as createAllCanonicalNav } from "@canonical/global-nav";
+import { initNavigationListeners } from "./listeners";
+import { patchAllCanonicalMobileMarkup } from "./globalNav";
+
+// initialize global-nav ("All Canonical" link) and the rest of the navigation
+window.addEventListener("DOMContentLoaded", function () {
+  createAllCanonicalNav();
+  patchAllCanonicalMobileMarkup();
+  initNavigationListeners();
+});