influxdata / influxdata/docs-v2
Sidebar active-page auto-expand doesn't sync the +/- toggle icon with visible children
- Dominant language
- JavaScript
- Stars
- 82
- Forks
- 326
- Avg merge
- 1d 1h
- Merged PRs (30d)
- 82
Description
## Describe the issue
In the left sidebar nav tree, ancestor sections auto-expanded on page load (to
reveal the active page) show a mismatched toggle icon: the section displays
"+" (collapsed-looking) while its children are actually visible. Clicking the
icon then flips it to "-" (expanded-looking) while the children collapse —
the opposite of what the icon communicates.
## Root cause
`layouts/partials/sidebar.html`, in the inline auto-expand script (~line
116-144), walks up from the active page's `
`ul.children`:
```js
var node = active.parentElement;
while (node && node.id !== 'nav-tree') {
if (node.tagName === 'UL' && node.classList.contains('children')) {
node.classList.add('open');
var t = node.previousElementSibling;
if (t && t.classList.contains('children-toggle')) t.classList.add('open');
}
node = node.parentElement;
}
```
`node.previousElementSibling` assumes `.children-toggle` immediately precedes
`ul.children`. But per `layouts/partials/sidebar/nested-menu.html` (lines
40-48), the markup order inside each `
- ...
```
So `ul.children`'s `previousElementSibling` is the plain link ``, not
`.children-toggle` — the `t.classList.contains('children-toggle')` check is
always false for every ancestor level, and the toggle icon never gets `.open`
added, even though `ul.children` does.
This only affects ancestor levels reached via the `while` loop. The
"own children" case a few lines above (128-132) is unaffected because it
queries the toggle directly: `active.querySelector(':scope > .children-toggle')`.
Then `assets/js/content-interactions.js`'s click handler
(`leftNavInteractions()`) toggles `.open` on both the icon and its sibling
`.children` together, so a click on a mismatched section flips the icon to
match its *stale* pre-click state instead of syncing to the actual (now
opposite) visibility — inverting the icon on every subsequent click for that
section.
## Suggested fix
In the `while` loop, look up the toggle the same way the "own children" block
does, instead of relying on sibling order, e.g.:
```js
var t = node.parentElement.querySelector(':scope > .children-toggle');
```
## Relevant URLs
- https://test2.docs.influxdata.com/pr-preview/pr-7754/influxdb3/core/plugins/library/official/state-change/
- Selector from repro: `#nav-tree > li:nth-child(5) > ul > li:nth-child(2) > ul > li:nth-child(2) > a.children-toggle`
- `layouts/partials/sidebar.html` (auto-expand script)
- `layouts/partials/sidebar/nested-menu.html` (menu item markup order)
- `assets/js/content-interactions.js` (`leftNavInteractions()`)
Contributor guide
No contributing guide indexed for this repository
Research direction
Start in layouts/partials/sidebar.html at the inline auto-expand script around lines 116-144, then compare the menu structure in layouts/partials/sidebar/nested-menu.html and the click behavior in assets/js/content-interactions.js. Reproduce the active-page ancestor expansion at the linked URL and verify that each visible ancestor's toggle icon stays synchronized when opened and clicked.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100