Meganav-rebase (#12939)

* add is-reduced class to top nav bar when subnav is present

* WIP reduced top nav

* Remove global nav

* Remove margin botton from the nav

* WIP - Update sign in icon

* add skip link

* WIP update main nav to use vanilla pattern as prescribed

* WIP sign in dropdown

* WIP mobile dropdown

* Display username when logged in

* Update background of selected menu

* Update mobile view of reduced top nav

* Add menu on mobile view

* WIP - secondary dropdowns

* Fix dropdown

* Update vanilla to 3.2.0

* Update sign in

* Fix dropdown-window

* Update dropdown-windown-overlay

* Update dropdown mobile view

* Fix menu button

* Lint scss

* Update search bar

* Fix overlay on mobile

* Fix user dropdown

* Fix overlay when closing menu

* Update secondary nav classes

* Update nav on tutorials page

* Fix tutorial topic dropdown

* Apply design review

* Update dropdown bg color

* Switch to scroll listening over page anchors

* Fix dropdown mobile view on home page

* Fix z-index

* Update dropdown content mobile view

* Update dropdown content responsiveness

* Keep menu open on small screen

* Stop Propagation

* Apply suggestions after code review

* Fix mobile dropdown cta

* fix search form

* remove position absolute on reduced mobile top nav

* remove active indicator on small screen nav dropdown

* adjust reduced nav translateY position on x large screens

* linting

* prevetn page from scrolling when opening secondary nav item on mobile

* maintain reduced nav within bubbles

* remove hash triggers for mega nav

* update the way the reduced nav is hidden to prevent modals breaking

* add focus event listeners on reduced nav

* make sure mobile dropdowns are closed when closing the menu

* add meganav yaml proof of concept

* Remove unused variables

* add global nav

* set global nav breakpoint to match the project nav threshold

* add all get ubuntu links to meganav

* add support links to meganav yaml

* add community links to mega nav yaml

* add products links to meganav.yaml

* add use case links to meganav.yaml

* fix typos and add missing links

* create meganav base partial

* Fix typos

Co-authored-by: Peter French <peterfrench94@gmail.com>

* More typos

Co-authored-by: Peter French <peterfrench94@gmail.com>

* add use case link descriptions

* add missing meganav data

* update tabbed content to support dynamically added tabs

* add tabbed content js to main js

* WIP styles for get ubuntu dropdown

* add missing link to meganav

* set meganav secondary link color

* fix hover and active states on meganav tabbed content

* fix background colors

* linting

* improve split lists in main panel

* remove placeholder content

* easeout the dropdown window, rather than easein

* add is-muted class

* initial pass at adding mobile styles to meganav

* add chevrons to mobile meganav

* add check for dropdown content elements

* add animating sub sections to mobile meganav

* fix alignment of muted headings in meganav

* fix button margin

* fix padding on mobile meganv, and animation speed on overlay

* update slide behaviour on mobile meganav

* linting

* prevent main nav transform on desktop

* update bg color on selected meganav sidenav

* update hover state on list items

* update column layout

* add hero item to primary content

* remove psuedo element based hover state

* organise meganv partials into their own directory

* add split_list filter to context

* create list item partial for repeated markup

* update layout of meganav hero item

* revert hero item concept and single column layout

* fix kvm link

* WIP remaining meganav sections

* fix infrastructure typo

* add unique ids to all meganav sidenav ctas and targets

* update global nav to 3.2.0

* add numpy for easier list splitting

* add 3 column views to meganav content panels

* add update meganav.yaml

* update global nav to 3.2.1

* close open meganav dropdowns when global nav is opened

* handle focus events

* hide dropdown chevron on subnav if there are no items to show

* update user login nav item

* remove animation rule from nav row

* Rename download-content to get-ubuntu-content

* Format python

* Update products in meganav.yaml

* Update 'use cases', 'support' and 'community' in meganav.yaml

* Edit content

Replace anchor links
Improve bubble titles

* Make references to "Certified" consistent

Incorporate feedback from Gloria

* Rename "Support" product tab as "Security and support"

Add Pro and Certifications
Make Certified consistent

* Tweak Ubuntu Server links

Shorten Landscape description
Tweak Smart home/city

* Review YAML to match spreadsheet

Repurpose secondary links under "Use case" for "By industry"
Fix capitalisation

* Remove temp fixes

* 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 <sowasred2012@gmail.com>
Co-authored-by: Juan Ruitiña <juan.ruitina@canonical.com>

* Nojs meganav (#13141)

* 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

* Create basic static nojs-meganav

* Apply style changes from UX mockup

* Enable nojs-meganav when JS is not enabled

* Apply changes from U review and make a basic mobile view mockup

* Format prettier

* Hide chevrons and implement fallbacks for 'menu' and 'search'

* Fix search not working on nojs mobile view

* Ux updates

* Fix prettier errors

* Lint JS

* Format prettier

---------

Co-authored-by: Scott Mason Nash <sowasred2012@gmail.com>
Co-authored-by: Juan Ruitiña <juan.ruitina@canonical.com>

* Rebase branch

* Appease linter gods

* Update meganav.yaml

Replace "Links" heading with "Quick links"
Add new pages
Incorporate feedback on CTAs

* Fix links & menu padding

* Revert "Fix links & menu padding"

This reverts commit c262b98.

* Fix links and fix menu padding (#13355)

* Remove comment

* Update nojs-nav links

* Format-python

* Update GA tracking and a location hash in the URL (#13362)

* Implement GA tracking and a location hash in the URL

* Appease the linter gods

* Update with code&qa suggestions

* Fix keyboarding trapping

* Bump global nav version

* Fix input, placeholder color and run prettier

* Adds keyboard trapping for mobile (#13447)

* Fix 'quick links' not being tabable on mobile

* Add keyboard trapping for mobile

* Make query for side-panel more generic

* Remove console.logs

* Minor bug fixes (#13467)

* Minor bug fixes

* Make global-nav link detection more specific

* Fix linter errors

* Fix alignment on bubble and remove black box on mobile (#13428)

* Fix alignment within grid within bubbles & remove floating black box on mobile

* Fix alignment of 'canonical' in the reduced mobile nav

* Add missing requirements

* Actually add missing requirements

* Align navigation to grid text

* Appease lint gods

* Update color of side nav tabs when active

* Align first nav item with text

* Appease linter

* Align items inside the dropdown ith page text

* Fix download desktop link + add why-pro to yaml

* Fix p-muted-heading alignment (#13482)

* Fix p-muted-heading alignment

* Account for both medium and small screens difference in padding

* Include highlighted_secondary_links in mobile view

* Let highlighted_secondary_links heading have top padding

* Add a tad more padding to use cases headings

* Lint lint lint

* Change Download link to 22.04.3

* Fix secondary links bug (#13507)

* Fix secondary links bug

* Run linter

* Fix "enterprise" typo in meganav.yaml

* Add functionality to account for height differences on mobile caused by the url navigation (#13517)

* Add functionality to account for height differences on mobile caused by the url navigation

* Lint

* Apply review suggestions

* Update URLs in meganav.yaml

* Add breakpoint crossover

* Remove amd-xilinx.html

* Remove reference to navigation-lock

* Revert yarn.lock

---------

Co-authored-by: Scott Mason Nash <sowasred2012@gmail.com>
Co-authored-by: minkyngkm <min.kim@canonical.com>
Co-authored-by: Anthony Dillon <me@anthonydillon.com>
Co-authored-by: Beth Collins <bethcollinsliv92@gmail.com>
Co-authored-by: Juan Ruitiña <juan.ruitina@canonical.com>
Co-authored-by: MariaPaula Trujillo <mtruj013@fiu.edu>

build.js

@@ -26,7 +26,6 @@ let entries = {
   "certified-search-results": "./static/js/src/certified-search-results.js",
   openstackDeploymentChart: "./static/js/src/openstack-deployment-chart.js",
   blender: "./static/js/src/advantage/subscribe/blender/app.tsx",
-  tabbedContent: "./static/js/src/tabbed-content.js",
   utmInheritance: "./static/js/src/utm-inheritance.js",
   "kernel-form": "./static/js/src/kernel-form.js",
   "random-partner-logos": "./static/js/src/random-partner-logos.js",