Implement sliding nav into meganav (#13009)

* add global nav

* add tabbed content js to main js

* fix global nav chevron position on reduced view

* Add second view for mobile

* Refactor to work with new sliding nav

* Fix css issues from refactoring html structure

* lint-scss

* Update with design usggestions from initial ux review

* Further ux review changes

* Make user dropdown work wit sliding nav

* Fix bug in account dropdown where clicking outside the made navigation would cause it to open

* Format prettier

* revert use-cases changes for demo

* Increase default grid width

* Implemened redesigned use-cases

* Lint-scss

* Further ux changes for demo purpose - global nav not working on mobile

* Implement new global nav for desktop

* Implement new global nav for mobile view

* Changes based on code and QA

* Content QA

Shorten line on Products > Featured
Fix capitalisation
Fix consistency issues

* Reposition search icon

* Add content fixes

Hyphenation for "enterprise-grade"
Replace Cloud Native Operations Survey link
Sort and tweak quick links under K8s, Juju and snaps

* Some final ux improvement and a small bug fix

* Fix spacing issue and highlight not appearing on account dropdown

* Fix global nav item alignment

* Implement global-nav 3.5.0 changes

* Changes based on Hans feedback

* Tweak bubble labels

Fix "Sign in" hyphenation typo

* Remove redundant headings ("Products")

* Visual design review changes

* Fix navigation padding bug

* Remove second 'skip to main content'

* Update with UX suggestions

* Bump grid-max-width to 90rem

* Fix logo alignment in primary navigation

* Refactor to use event delegation

* Update alignment in reduced nav

* Add failsafe to prevent dropdowns being fetched multiple times

* Bump global-nav version to 3.6.1

* Align logos far left

* Make reduced nav not sticky

* Allow dropdowns to be scrollable if viewport height is smaller than the dropdown height

* Add missing links to mobile dropdowns

* Align top level mobile items with logo

* Add fallback for hover loading on touchscreen devices

* Use variables for repeated values

* Handle resize events

* Close meganav on any resize event

* Use grid-max-width variable

* Handle resize event on secondary nav

* Fix highlighted page alignment

* Delete unused 'navigation-meganav-base.html file

* Only closeAll on resize event if mobile-breakpoint threshold is crossed

---------

Co-authored-by: Scott Mason Nash <[email protected]>
Co-authored-by: Juan Ruitiña <[email protected]>

navigation.yaml

@@ -80,7 +80,7 @@ managedapps:
       path: /observability/managed
 
 openstack:
-  title: OpenStack
+  title: Canonical OpenStack
   path: /openstack
 
   children:
@@ -122,7 +122,7 @@ financial-services:
       path: /financial-services/resources
 
 ceph:
-  title: Ceph
+  title: Canonical Ceph
   path: /ceph
 
   children:
@@ -220,7 +220,7 @@ ai:
       path: /ai/roadshow
 
 kubernetes:
-  title: Kubernetes
+  title: Canonical Kubernetes
   path: /kubernetes
 
   children:

requirements.txt

@@ -30,3 +30,4 @@ time-machine==2.9.0
 filelock==3.12.0
 bleach==6.0.0
 numpy==1.24.4
+python-slugify==8.0.1

static/js/src/core.js

@@ -11,4 +11,8 @@ createNav({
 // Initalise the cookie policy notification.
 cookiePolicy();
 
-createNav({ breakpoint: 1150 });
+createNav({
+  breakpoint: 1150,
+  mobileContainerSelector: ".global-nav-mobile",
+  desktopContainerSelector: ".global-nav-desktop",
+});

static/js/src/main.js

@@ -7,7 +7,6 @@ import "./accordion.js";
 import "./dynamic-forms.js";
 import "./static-forms.js";
 import "./core.js";
-import "./navigation.js";
 import "./mobile-footer-navigation.js";
 import "./smart-quotes.js";
 import "./intlTelInput.js";