Resizable Nav on desktop

[kashan-samad]

Resizable Nav on desktop

📋 Summary

This PR adds a resizable navigation panel, allowing users to adjust the width of the sidebar on desktop while maintaining the existing overlay behavior on mobile devices.

🎯 Problem

Currently, the navigation sidebar has a fixed width on desktop, which may not be optimal for all screen sizes and user preferences. Users cannot adjust the sidebar width to better fit their workspace or viewing preferences, leading to suboptimal screen space utilization.

✨ Solution

Implemented a new ResizableNav component that wraps the existing Nav component with react-resizable-panels functionality:

• Desktop Experience: Users can now drag the navigation panel edge to resize it (15%-35% of screen width), with state persistence across sessions
• Mobile Experience: Preserved the existing overlay behavior with smooth transitions
• Bidirectional Sync: Collapse button and resizable panel state stay synchronized
• State Persistence: Navigation width and visibility preferences saved to localStorage

📸 Visual Changes

On desktop:

• A draggable handle appears between the navigation panel and main content area
• Users can smoothly resize the sidebar by dragging the handle
• Sidebar can be collapsed/expanded with the toggle button or by resizing to minimum width
• The selected width persists across page reloads

On mobile:

• No changes to the existing overlay behavior
• Navigation slides in/out as before

Change Type

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update
• Translation update

Checklist

• My code adheres to this project's style guidelines
• I have performed a self-review of my own code
• I have commented in any complex areas of my code
• I have made pertinent documentation changes
• My changes do not introduce new warnings
• I have written tests demonstrating that my changes are effective or that my feature works
• Local unit tests pass with my changes
• Any changes dependent on mine have been merged and published in downstream modules.
• A pull request for updating the documentation has been submitted.

[Copilot]

Pull request overview

Adds a resizable sidebar navigation on desktop (with persisted width), while keeping the existing mobile “overlay + content slide” behavior.

Changes:

• Replaced Root’s inline nav/content layout with a new ResizableNav wrapper that provides the Outlet context.
• Introduced ResizableNav using react-resizable-panels (desktop resizable panel + autosave) and preserved the existing mobile transform behavior.
• Simplified Nav desktop rendering to rely on the surrounding resizable panel rather than internal width/animation logic.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 4 comments.

File	Description
client/src/routes/Root.tsx	Swaps the previous Nav/content wrapper for ResizableNav and passes Outlet context through it.
client/src/components/Nav/index.ts	Exports the new ResizableNav component from the Nav barrel.
client/src/components/Nav/ResizableNav.tsx	New component implementing desktop resizable layout + mobile overlay behavior, and attempts to persist visibility.
client/src/components/Nav/Nav.tsx	Removes desktop framer-motion wrapper and adjusts desktop rendering expectations for the new layout.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.