egullickson/motovaultpro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add desktop sidebar collapse to icon-only mode (#162) #176

New Issue
Closed
opened 2026-02-13 22:24:28 +00:00 by egullickson · 2 comments
egullickson commented 2026-02-13 22:24:28 +00:00
Owner
Copy Link
Copy Source

Relates to #162

Severity: Medium

Problem

The left sidebar is always fully expanded at ~120px wide. On smaller desktop/laptop screens this takes meaningful space.

Recommendation

Allow sidebar collapse to icon-only mode via the existing hamburger menu icon.

Acceptance Criteria

  • Hamburger menu icon toggles sidebar between expanded and icon-only modes
  • Icon-only mode shows navigation icons without text labels
  • Sidebar state persists during the session
  • Tooltips on icons in collapsed mode for discoverability
  • Tested on desktop (1920px and smaller laptop screens)
Relates to #162 ## Severity: Medium ## Problem The left sidebar is always fully expanded at ~120px wide. On smaller desktop/laptop screens this takes meaningful space. ## Recommendation Allow sidebar collapse to icon-only mode via the existing hamburger menu icon. ## Acceptance Criteria - Hamburger menu icon toggles sidebar between expanded and icon-only modes - Icon-only mode shows navigation icons without text labels - Sidebar state persists during the session - Tooltips on icons in collapsed mode for discoverability - Tested on desktop (1920px and smaller laptop screens)
egullickson added the
status
backlog
type
chore
 labels 2026-02-13 22:24:49 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:25:07 +00:00
egullickson commented 2026-02-14 01:17:37 +00:00
Author
Owner
Copy Link
Copy Source

Implementation Plan (from #162 -- Milestone 19)

Phase: 8 (Header and minor polish) | Priority: Medium | Depends on: None | Blocks: None

Context

The desktop sidebar currently has two states: fully expanded (256px) or fully hidden (slides off-screen). There is no intermediate icon-only mode for users who want to reclaim screen space while keeping navigation accessible.

Design Decision

Two-state toggle: expanded (256px) <-> collapsed (64px). No hidden state. Rationale:

  • The hamburger icon in the top bar already toggles sidebar visibility (slides off-screen). Adding a third "hidden" state creates confusion about which control does what.
  • Collapsed icon-only mode is sufficient for reclaiming screen space on smaller desktops.

Implementation

1. Add state to frontend/src/core/store/appStore.ts:

  • Add new state: sidebarCollapsed: boolean (default: false)
  • Add action: toggleSidebarCollapse()
  • Three visual states driven by TWO booleans:
    • sidebarOpen=true, sidebarCollapsed=false -> Expanded (256px, icons + labels)
    • sidebarOpen=true, sidebarCollapsed=true -> Collapsed (64px, icons only)
    • sidebarOpen=false -> Hidden (0px, off-screen)

2. Persist collapse state:

  • Use localStorage.getItem/setItem via useEffect (not Zustand persist)
  • Read on mount, write on change

3. Update frontend/src/components/Layout.tsx:

  • Hamburger icon on desktop: toggles between expanded and collapsed (does NOT hide)
  • Sidebar width: CSS transition width 200ms ease-in-out
  • Collapsed rendering: Each nav item shows icon only, wrapped in MUI <Tooltip title="Page Name" placement="right">. Active indicator remains.
  • Main content margin-left: sidebarCollapsed ? '64px' : '256px' (when sidebarOpen)
  • Matching margin-left transition on content area

Files

  • frontend/src/core/store/appStore.ts (add state + action)
  • frontend/src/components/Layout.tsx (sidebar rendering + toggle logic)

Commit Convention

feat: add desktop sidebar collapse to icon-only mode (refs #176)

Test Criteria

  • Hamburger toggles between expanded and collapsed on desktop
  • Collapsed mode shows icons only (no text labels)
  • Tooltips appear on hover in collapsed mode showing page names
  • Active page indicator visible in both modes
  • Content area adjusts width smoothly with CSS transition
  • Sidebar state persists across page reloads (localStorage)
  • Mobile layout is unaffected
  • Verify on desktop (1024px, 1920px) viewports

Risk Notes

  • CSS transitions need careful testing at various viewport widths.
  • Ensure tooltip placement doesn't conflict with content area.

Branch

Work on branch issue-162-ux-design-audit-cleanup (shared with all #162 sub-issues)

## Implementation Plan (from #162 -- Milestone 19) **Phase**: 8 (Header and minor polish) | **Priority**: Medium | **Depends on**: None | **Blocks**: None ### Context The desktop sidebar currently has two states: fully expanded (256px) or fully hidden (slides off-screen). There is no intermediate icon-only mode for users who want to reclaim screen space while keeping navigation accessible. ### Design Decision **Two-state toggle**: expanded (256px) <-> collapsed (64px). No hidden state. Rationale: - The hamburger icon in the top bar already toggles sidebar visibility (slides off-screen). Adding a third "hidden" state creates confusion about which control does what. - Collapsed icon-only mode is sufficient for reclaiming screen space on smaller desktops. ### Implementation **1. Add state to `frontend/src/core/store/appStore.ts`:** - Add new state: `sidebarCollapsed: boolean` (default: `false`) - Add action: `toggleSidebarCollapse()` - Three visual states driven by TWO booleans: - `sidebarOpen=true, sidebarCollapsed=false` -> Expanded (256px, icons + labels) - `sidebarOpen=true, sidebarCollapsed=true` -> Collapsed (64px, icons only) - `sidebarOpen=false` -> Hidden (0px, off-screen) **2. Persist collapse state:** - Use `localStorage.getItem/setItem` via `useEffect` (not Zustand persist) - Read on mount, write on change **3. Update `frontend/src/components/Layout.tsx`:** - Hamburger icon on desktop: toggles between expanded and collapsed (does NOT hide) - Sidebar width: CSS transition `width 200ms ease-in-out` - Collapsed rendering: Each nav item shows icon only, wrapped in MUI `<Tooltip title="Page Name" placement="right">`. Active indicator remains. - Main content `margin-left`: `sidebarCollapsed ? '64px' : '256px'` (when `sidebarOpen`) - Matching `margin-left` transition on content area ### Files - `frontend/src/core/store/appStore.ts` (add state + action) - `frontend/src/components/Layout.tsx` (sidebar rendering + toggle logic) ### Commit Convention ``` feat: add desktop sidebar collapse to icon-only mode (refs #176) ``` ### Test Criteria - Hamburger toggles between expanded and collapsed on desktop - Collapsed mode shows icons only (no text labels) - Tooltips appear on hover in collapsed mode showing page names - Active page indicator visible in both modes - Content area adjusts width smoothly with CSS transition - Sidebar state persists across page reloads (localStorage) - Mobile layout is unaffected - Verify on desktop (1024px, 1920px) viewports ### Risk Notes - CSS transitions need careful testing at various viewport widths. - Ensure tooltip placement doesn't conflict with content area. ### Branch Work on branch `issue-162-ux-design-audit-cleanup` (shared with all #162 sub-issues)
egullickson added
status
in-progress
 and removed
status
backlog
 labels 2026-02-14 02:04:47 +00:00
egullickson commented 2026-02-14 02:07:12 +00:00
Author
Owner
Copy Link
Copy Source

Milestone: Implementation Complete

Phase: Execution | Agent: Developer | Status: PASS

Changes

frontend/src/core/store/app.ts:

  • Added sidebarCollapsed: boolean state (default from localStorage)
  • Added toggleSidebarCollapse() action with localStorage persistence

frontend/src/components/Layout.tsx:

  • Sidebar width: 256px (expanded) <-> 64px (collapsed) with CSS transition
  • Chevron icons in sidebar header toggle collapse state
  • Top bar hamburger toggles collapse (not hide)
  • Collapsed mode: icons only, centered, with right-placed Tooltip on hover
  • Footer: collapsed shows avatar only (with tooltip); expanded shows full user info + sign out
  • Content area margin-left transitions smoothly with sidebar width
  • Mobile layout unaffected

Verification

  • ESLint: PASS (0 errors, pre-existing warning only)
  • TypeScript: PASS
  • Commit: bc72f09

Verdict: PASS | Next: Move to status/done

## Milestone: Implementation Complete **Phase**: Execution | **Agent**: Developer | **Status**: PASS ### Changes **`frontend/src/core/store/app.ts`:** - Added `sidebarCollapsed: boolean` state (default from localStorage) - Added `toggleSidebarCollapse()` action with localStorage persistence **`frontend/src/components/Layout.tsx`:** - Sidebar width: 256px (expanded) <-> 64px (collapsed) with CSS transition - Chevron icons in sidebar header toggle collapse state - Top bar hamburger toggles collapse (not hide) - Collapsed mode: icons only, centered, with right-placed Tooltip on hover - Footer: collapsed shows avatar only (with tooltip); expanded shows full user info + sign out - Content area `margin-left` transitions smoothly with sidebar width - Mobile layout unaffected ### Verification - ESLint: PASS (0 errors, pre-existing warning only) - TypeScript: PASS - Commit: `bc72f09` *Verdict*: PASS | *Next*: Move to status/done
egullickson added
status
done
 and removed
status
in-progress
 labels 2026-02-14 02:07:13 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
status
backlog
status/blocked
status
done
status
in-progress
status
ready
status
review
type
bug
type
chore
type
docs
type
feature
No labels
status
done
type
chore
Milestone
No items
No Milestone Sprint 2026-02-02
Projects
Clear projects
No projects
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#176