Skip to content

Conversation

@OpenStaxClaude
Copy link

Summary

Refactors the SidebarNav component to improve code organization by extracting four custom hooks, following Single Responsibility Principle as identified in CORE-1448.

Changes Made

  1. useClickOutside - Detects clicks/touches outside a specified element

    • Extracted from inline event handling in SidebarNavBase
    • Parameterized with ref, callback, and enabled flag for reusability
  2. useEscapeKey - Detects Escape key press events

    • Extracted from inline keyboard event handling
    • Parameterized with callback and enabled flag
  3. useScrollRestoration - Preserves scroll position across re-renders

    • Extracted scroll position management logic
    • Uses requestAnimationFrame for smooth restoration
  4. useNavCollapseHandler - Handles nav collapse/expand with animation

    • Eliminates code duplication between SidebarNav and BodyPortalSidebarNav
    • Encapsulates animation state management logic

Impact

  • Reduces SidebarNavBase from 121 lines to 77 lines (-36%)
  • Eliminates 12 lines of duplicated code between wrapper components
  • All hooks are now reusable across other components
  • Improves testability through better separation of concerns
  • No breaking changes - maintains backward compatibility

Testing

  • Build passes successfully
  • All existing component interfaces preserved
  • No changes to component props or exports

Related Issues

  • CORE-1448: Identify complex code needing refactoring
  • CORE-1451: Refactor SidebarNav (this ticket)

🤖 Generated with Claude Code

OpenStaxClaude and others added 2 commits December 22, 2025 19:46
This change improves the SidebarNav component by applying Single Responsibility Principle:

- Extract useClickOutside hook: Handles click and touch events outside an element
- Extract useEscapeKey hook: Handles Escape key press detection
- Extract useScrollRestoration hook: Manages scroll position across re-renders
- Extract useNavCollapseHandler hook: Handles nav collapse/expand with animation

Benefits:
- Reduces SidebarNavBase complexity from 121 lines to 77 lines (-36%)
- Eliminates code duplication between SidebarNav and BodyPortalSidebarNav
- Makes hooks reusable across other components
- Improves testability by isolating concerns
- Maintains backward compatibility with no breaking changes

Related to CORE-1448 and CORE-1451

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
default values never used
ref can be null
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.

4 participants