Skip to content

feat: 5 sidebar mockups (auto-close, pin, expand)#39

Open
andrewhopper wants to merge 1 commit intomasterfrom
claude/issue-16-20260303-1121
Open

feat: 5 sidebar mockups (auto-close, pin, expand)#39
andrewhopper wants to merge 1 commit intomasterfrom
claude/issue-16-20260303-1121

Conversation

@andrewhopper
Copy link
Owner

Adds 5 interactive HTML mockups exploring different sidebar UX patterns for issue #16.

Each mock demonstrates a different approach to sidebar auto-close, pin-open, and file-selection UX using shadcn/Tailwind design tokens.

Closes #16

Generated with Claude Code

Creates 5 interactive HTML mockups exploring different sidebar
auto-close/pin UX patterns for issue #16:

- Mock 1: Icon rail (48px) that expands on click + pin button
- Mock 2: Top hamburger → floating drawer with click-outside-to-close
- Mock 3: Hover-to-expand dark rail sidebar (VS Code-style) with pin
- Mock 4: Floating FAB + command palette with live file search
- Mock 5: Drag-to-resize sidebar with collapse strip handle

All mocks use Tailwind CSS (shadcn's foundation) with shadcn
color tokens (hsl variables), component patterns (Sheet, Button),
and design conventions.

Co-authored-by: Andrew Hopper <andrewhopper@users.noreply.github.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

1 participant