Skip to content

Add resizable sidebar with drag-to-resize and localStorage persistence#45

Open
chernikovalexey wants to merge 1 commit intojakemor:mainfrom
chernikovalexey:feature/resizable-sidebar
Open

Add resizable sidebar with drag-to-resize and localStorage persistence#45
chernikovalexey wants to merge 1 commit intojakemor:mainfrom
chernikovalexey:feature/resizable-sidebar

Conversation

@chernikovalexey
Copy link
Copy Markdown

Summary

  • Users can now drag the right edge of the sidebar to resize it (225px – 480px range)
  • Width persists to localStorage across sessions and page reloads
  • Double-click the drag edge to snap back to the default 275px
  • Mobile overlay and sidebar collapse/expand behavior are completely unaffected

How it works

New useSidebarResize hook handles mouse tracking, clamping, and localStorage read/write. The sidebar's fixed md:w-[275px] is replaced with a CSS custom property (--sidebar-w) so width is dynamic on desktop but the mobile full-screen overlay still works via inset-0.

The drag zone is a 6px invisible strip on the sidebar's right edge — no visual indicator, just a col-resize cursor on hover.

Screenshot 2026-04-09 at 17 28 22

Files changed

  • src/client/app/useSidebarResize.ts — new hook
  • src/client/app/KannaSidebar.tsx — wired up hook, swapped fixed width for CSS var, added drag zone

Test plan

  • Hover the sidebar's right edge — cursor should change to ↔
  • Drag to resize between 225px and 480px
  • Reload the page — width should persist
  • Double-click the edge — should reset to 275px
  • Collapse and expand the sidebar — should retain resized width
  • Test on mobile viewport — sidebar should still be a full-screen overlay
  • Verify no layout shift on the main content area while resizing

Copy link
Copy Markdown

@greptile-apps greptile-apps Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Your free trial has ended. If you'd like to continue receiving code reviews, you can add a payment method here.

@jakemor
Copy link
Copy Markdown
Owner

jakemor commented Apr 14, 2026

There are already drag to resize patterns in the app and state is managed by zustand - would you mind having your agent make these changes?

Wraps the left sidebar in a ResizablePanelGroup with a zustand-backed
store (persisted to localStorage) so users can drag the divider to
resize. Width is clamped to 225–480px; the card inset is applied via
panel padding so the right border sits flush with the resize handle.
@chernikovalexey chernikovalexey force-pushed the feature/resizable-sidebar branch from 95d8361 to 0264cfe Compare April 23, 2026 11:41
@chernikovalexey
Copy link
Copy Markdown
Author

Done. Let me know what you think!

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.

2 participants