canonical / canonical/vanilla-framework
Navigation scripts are not well-encapsulated
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
**Describe the bug**
The JS scripts used by the navigation pattern do not work properly when there are multiple navigation components on the screen. This introduces issues for #5165 , where we would like the nav component to be fully interactive in combined form, just as it is in singular form.
**To Reproduce**
Steps to reproduce the behavior:
1. Add multiple navigation components to the same page. Import the same navigation scripts in each component separately. A good way to do this is to checkout the [combined navigation PR](https://github.com/canonical/vanilla-framework/pull/5165) and then revert the [commit that disabled its interactivity](https://github.com/canonical/vanilla-framework/pull/5165/commits/86a5aab39e073b6c14a85b8441f7ca51a9ad2ca4).
2. Observe console error:
```
Uncaught SyntaxError: redeclaration of const initNavigationSliding
```
**Expected behavior**
Multiple imports of the navigation scripts should not cause errors. The component's script should be encapsulated such that there can be multiple indepedent navigation components on the same DOM.
**Further context**
[MM thread](https://chat.canonical.com/canonical/pl/tg7ch6pe5pf7zp4pw6brtpwzmh)
Contributor guide
Research direction
Start with the navigation scripts used by the navigation pattern and reproduce the error by importing them separately in multiple components, as described in the issue and combined navigation PR #5165. Confirm that repeated imports no longer cause the redeclaration error and that multiple navigation components remain independently interactive.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 40/100