canonical / canonical/vanilla-framework

Navigation scripts are not well-encapsulated

Open
#5,180 3 comments 0 reactions 0 assignees View on GitHub
P3 Needs decision
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.