Skip to content

Fix sidebar sub-nav items not reacting to hover#734

Open
Paelsmoessan wants to merge 1 commit into
Listenarrs:canaryfrom
Paelsmoessan:fix/sidebar-subnav-hover
Open

Fix sidebar sub-nav items not reacting to hover#734
Paelsmoessan wants to merge 1 commit into
Listenarrs:canaryfrom
Paelsmoessan:fix/sidebar-subnav-hover

Conversation

@Paelsmoessan

Copy link
Copy Markdown

Summary

In the left sidebar, the sub-nav items (Books/Authors/Series under Audiobooks, and the Settings
children) did not react to hover. You had to hover the parent top node first before a child would
respond, which read as broken.

Changes

Fixed

  • Sub-items had no hover or focus feedback. .nav-subitem had CSS for only its default and
    .active states, so hovering (or keyboard-focusing) a sub-item produced no visual change. Added a
    :hover / :focus-visible highlight that matches the existing blue accent.
  • Children were unreachable until the parent was hovered. .nav-sub was collapsed with
    pointer-events: none until it received .open (driven by hovering the parent). So for any section
    you were not currently on, the children could not be hovered at all until you first hovered the top
    node. Made the sub-navs stay expanded so children are always interactive and highlight on their own
    hover.

Testing

  • Frontend builds clean.
  • Verified live: hovering any sub-item (in the active section or any other) now highlights it
    directly, with no need to hover the parent first. Keyboard focus highlights too.

Notes

  • The second change removes the collapse/expand animation in favor of an always-expanded tree, since
    that collapse was the source of the reachability gate. If maintainers prefer to keep the accordion,
    I am happy to instead fix reachability another way (for example expanding on child focus/hover
    without the pointer-events block). Flagging it since it is a small behavior change.
  • Suggested version label: patch.

Sidebar sub-items (.nav-subitem) had CSS for only their default and active states, so they
never highlighted on hover or keyboard focus. On top of that, .nav-sub was collapsed with
pointer-events:none until opened via a parent hover, so a non-active section's children were
unreachable until you hovered the top node first.

Add a :hover / :focus-visible highlight, and keep the sub-navs expanded so children are always
interactive and highlight on their own hover.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@Paelsmoessan Paelsmoessan requested a review from a team July 4, 2026 21:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant