Skip to content

refactor: replace button+navigate() with React Router NavLink in sidebar#3022

Draft
StarbirdTech wants to merge 1 commit intospacedriveapp:mainfrom
StarbirdTech:fix/onclick-guards
Draft

refactor: replace button+navigate() with React Router NavLink in sidebar#3022
StarbirdTech wants to merge 1 commit intospacedriveapp:mainfrom
StarbirdTech:fix/onclick-guards

Conversation

@StarbirdTech
Copy link
Contributor

Fixes #3008

Draft — untested on macOS and Windows. Opening early for visibility and approach feedback.

Replaces the <button onClick={() => navigate(path)}> pattern with React Router <NavLink> for sidebar navigation. The current pattern uses buttons for what are semantically links — screen readers announce "button" instead of "link", there's no right-click "Copy Link" or status bar URL preview, and every component manually reimplements active-state detection and click filtering.

Changes

SidebarItem is now polymorphic — pass a to prop and it renders as <NavLink> with automatic active state and <a> tag semantics. Omit to and it renders as <button> for action items like "Add Location". This is the core of the refactor; everything else follows from it.

Explorer sidebar, LocationsSection, and TagItem now use to prop / <NavLink> directly, eliminating useNavigate(), useLocation(), isActive() helpers, and manual click guards from these components.

shouldNavigate() utility for navigation that can't use <NavLink> — SpaceItem (dnd-kit sortable listeners on the element), TopBarButton expand/back actions, "Open Location" in the inspector. Replaces the incomplete e.button !== 0 guard with full modifier key checks (meta, ctrl, shift, alt).

Not yet tested

I need to check several things on macOS and Windows such as:

  • Left-click sidebar NavLinks navigates, active state highlights
  • Overview NavLink active only on / (tests end prop)
  • Middle-click / Ctrl+click doesn't navigate in-app
  • "Add Location" button still works (button mode)
  • SpaceItem click + DnD still works
  • TopBarButton expand/back in Sync/Jobs popovers still navigates
  • DOM inspection: nav items render as <a>, action items as <button>

Replace button+onClick+navigate() pattern with React Router NavLink
components for sidebar navigation items. This improves accessibility
(screen readers announce links instead of buttons), enables browser
affordances (right-click copy link, status bar URL preview), and
eliminates manual active-state detection boilerplate.

- Make SidebarItem polymorphic: `to` prop renders NavLink with auto
  active state, omitting `to` renders button (for action items)
- Convert explorer Sidebar, LocationsSection, and TagItem to use
  NavLink-based navigation
- Add shouldNavigate() utility for button-based navigation that can't
  use NavLink (SpaceItem with dnd-kit, TopBarButton actions, etc.)
- shouldNavigate() checks both e.button and modifier keys (meta, ctrl,
  shift, alt), replacing incomplete e.button !== 0 guards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
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.

Middle-click causes forward-navigation

1 participant