WD-30045 - Implement sliding navigation in snapcraft.io#5437
WD-30045 - Implement sliding navigation in snapcraft.io#5437alvaromateo merged 8 commits intomainfrom
Conversation
Demo
Jenkins 
demos.haus 
|
|
||
| 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" |
There was a problem hiding this comment.
Out of curiosity, why is this change needed?
There was a problem hiding this comment.
It's optional, but given that you are already in the latest flask-base version, with this change you will get the pretty printed logs in DEV mode, which is a nice addition 😄
| const topLevelNavigation = dropdownToggleButton.closest(".p-navigation__nav"); | ||
| if (topLevelNavigation) { | ||
| const topLevelItems = topLevelNavigation.querySelectorAll( | ||
| ":scope > .p-navigation__items", |
There was a problem hiding this comment.
Pull Request Overview
This PR implements sliding navigation animations for snapcraft.io by migrating from a simpler global-nav implementation to a custom navigation system with enhanced interaction patterns. The changes introduce sliding animations for dropdown menus, improved mobile navigation handling, and better keyboard navigation support.
Key changes include:
- Complete refactor of navigation JavaScript from a single global-nav.ts file to a modular structure with separate concerns (listeners, dropdown utilities, global nav patches)
- Updates to HTML markup and SCSS to support sliding animations across all screen sizes
- Upgrade of @canonical/global-nav package from 3.7.3 to 3.8.0
Reviewed Changes
Copilot reviewed 12 out of 13 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| templates/_header_macros.html | Updates import path to new modular navigation structure |
| templates/_header.html | Changes navigation wrapper classes to support sliding animations |
| static/sass/_snapcraft_p-navigation.scss | Adds styles for sliding animations and wrapper positioning |
| static/js/base/navigation/login.ts | Adds blank line (formatting only) |
| static/js/base/navigation/listeners.ts | New file implementing all navigation interaction handlers |
| static/js/base/navigation/index.ts | New entry point orchestrating navigation initialization |
| static/js/base/navigation/globalNav.ts | New utility for patching global-nav mobile markup |
| static/js/base/navigation/dropdownUtils.ts | New utility functions for dropdown state management |
| static/js/base/global-nav.ts | Removed - functionality migrated to new modular structure |
| static/js/base/base.ts | Removes unused navigation import |
| package.json | Updates @canonical/global-nav to version 3.8.0 |
| entrypoint | Adds custom logger configuration for debug mode |
On the /docs page (not available on demos) on mobile, there is excessive margin top between top nav and expanded navigation. On standard layout this margin accommodates for top nav height, but in docs layout it seems it's not needed. We may need to apply it only on standard layout. |
alvaromateo
force-pushed
the
WD-30045
branch
from
c5cd4bb to
e5eb7a4
Compare
Good catch @bartaz! I just saw this bug is present also in PROD. |
alvaromateo
force-pushed
the
WD-30045
branch
from
5087d4f to
985c60a
Compare
Done
global-navto snapcraft.io.More specifically these changes include:
global-navto the sliding style (mainlyHow to QA
Issue / Card
Fixes WD-30045