Skip to content

fix(#1039): hover-to-expand collapsed sidebar temporarily - #2132

Open
xielixing wants to merge 1 commit into
GCWing:mainfrom
xielixing:fix/issue-1039-sidebar-hover-expand
Open

fix(#1039): hover-to-expand collapsed sidebar temporarily#2132
xielixing wants to merge 1 commit into
GCWing:mainfrom
xielixing:fix/issue-1039-sidebar-hover-expand

Conversation

@xielixing

Copy link
Copy Markdown

Summary

When the sidebar is collapsed, hovering the collapsed strip temporarily expands the nav panel as a floating overlay — no click required. The panel collapses again when the cursor moves away.

Closes #1039

Changes

  • WorkspaceBody.tsx: Added \isHoverExpanded\ state with shared timeout management (200ms expand/collapse delay). Wired \onMouseEnter/\onMouseLeave\ on both the collapsed strip and the nav-area flyout.
  • WorkspaceBody.scss: Added .is-hover-expanded\ CSS — positions the nav-area as an absolute flyout with shadow, border-radius, and background. Added macOS-specific left offset (72px for traffic lights). Added \prefers-reduced-motion\ fallback.

Behavior

  1. Sidebar is collapsed (user clicked collapse or dragged past threshold)
  2. User hovers the collapsed strip → after 200ms, nav panel appears as floating overlay
  3. User moves cursor into the flyout → stays open
  4. User moves cursor away → after 200ms, flyout collapses
  5. User clicks expand button → panel permanently expands, hover state resets

Validation

  • \ sc --noEmit\ passes (verified from main repo's web-ui with node_modules)
  • No new imports or types added
  • Changes follow existing patterns in the file (useState, useCallback, React event handlers)
  • \prefers-reduced-motion\ respected

When the sidebar is collapsed, hovering the collapsed strip temporarily
expands the nav panel as a floating overlay. The expansion uses a shared
timeout (200ms) so the cursor can move between the collapsed strip and the
flyout without it collapsing prematurely. Moving away schedules a collapse
after the same delay.

- Add isHoverExpanded state and hover timeout management
- Wire mouseEnter/mouseLeave on collapsed-nav and nav-area
- Add is-hover-expanded CSS: absolute flyout with shadow, border-radius
- macOS: offset flyout left by 72px to match traffic-light spacing
- Respect prefers-reduced-motion (no transition)
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.

[Feature] 鼠标悬停侧边栏展开按钮时, 侧边栏可临时悬浮展开

1 participant