[Sidebar] Enhanced navigation modes and interactions

[ravisuhag]

Summary

Add enhanced navigation modes and interaction features to the Sidebar component for improved usability across different devices and use cases.

Note: API examples below are proposals, not finalized. Open for discussion.

Current API

The existing Sidebar has:

• open / onOpenChange / defaultOpen for collapse state
• position (left/right)
• collapsible boolean
• hideCollapsedItemTooltip
• tooltipMessage

---

Proposed Features

1. Mode States (Full / Mini / Hidden)

Support three distinct states instead of two: full → mini → hidden.

The current open prop controls width, not visibility. A mode prop is clearer.

Proposed API:

<Sidebar mode="full" onModeChange={(mode) => {}} />
<Sidebar mode="mini" />
<Sidebar mode="hidden" />

Acceptance Criteria:

• Mini mode shows only icons with tooltips on hover
• Smooth transitions between all three states
• onModeChange callback for controlled mode

---

2. Resizable Width

Allow users to drag a handle to resize sidebar width (beyond just collapse/expand).

Proposed API:

// Option A: Flat props (simpler for basic use)
<Sidebar resizable minWidth={200} maxWidth={400} />

// Option B: Grouped (keeps related config together)
<Sidebar 
  resize={{ 
    enabled: true, 
    min: 200, 
    max: 400,
    defaultWidth: 280,
    onResize: (width) => {}
  }} 
/>

Acceptance Criteria:

• Drag handle on the edge of the sidebar
• Configurable min/max width constraints
• Width persists during session
• Smooth resize animation

---

3. Mobile Drawer Mode

Automatically convert sidebar to a slide-out drawer on mobile viewports.

Proposed API:

// Option A: Flat props
<Sidebar mobileBreakpoint={768} mobileVariant="drawer" />

// Option B: Grouped
<Sidebar 
  responsive={{
    breakpoint: 768,  // or 'sm' | 'md' | 'lg'
    behavior: 'drawer',
    closeOnOutsideClick: true,
    swipeGesture: true,
  }}
/>

Acceptance Criteria:

• Configurable breakpoint for mobile detection
• Drawer slides in from left/right based on position prop
• Overlay/backdrop when drawer is open
• Touch gestures to open/close (swipe)
• Close on outside click
• Trap focus when open for accessibility

---

4. Visual Variants

Support multiple visual variants for different use cases.

Proposed API:

<Sidebar variant="default" />   // Current styling
<Sidebar variant="floating" />  // Floats over content with shadow
<Sidebar variant="inset" />     // Inset within content area
<Sidebar variant="plain" />     // Minimal styling, no background/borders

Acceptance Criteria:

• floating - Sidebar floats over content with shadow/elevation
• inset - Sidebar inset within the content area
• plain - Minimal styling without background/borders

---

5. Collapsible Item Groups

Allow grouping sidebar items with collapsible sections.

Proposed API:

<Sidebar.Group 
  label="Settings"
  collapsible
  defaultExpanded={true}
  // or controlled:
  expanded={isExpanded}
  onExpandedChange={setExpanded}
/>

Acceptance Criteria:

• Expandable/collapsible item groups
• Persist expand/collapse state
• Smooth animation for expand/collapse

---

6. Context Menu

Allow customizing sidebar items via right-click context menu.

Proposed API:

<Sidebar.Item 
  contextMenuItems={[
    { label: 'Edit', onClick: handleEdit },
    { label: 'Delete', onClick: handleDelete },
  ]}
/>

Acceptance Criteria:

• Right-click on sidebar items shows context menu
• Configurable context menu options per item

---

7. Color Tone

Allow setting different color tones to the sidebar.

Proposed API:

<Sidebar tone="neutral" />
<Sidebar tone="accent" />

Acceptance Criteria:

• Support multiple color tone options
• Consistent with overall theme system

---

Styling Improvements

• Active item background is too dark - reduce intensity
• Hover state color is too dark - lighten hover background
• Adjust top and bottom padding
• Add 1-2px gap between items (hover currently overlaps)
• Workspace/Organization logo should be larger in size
• Icons alignment looks slightly odd - improve alignment
• Increase spacing between icon and text

---

Bugs

• On icon collapse, only logo of workspace switcher should be visible
  • Fix: conditional rendering based on isCollapsed context
• Layout should not shift when toggling collapse
  • Fix: use fixed width container instead of content-based sizing
• Sidebar grouping text should convert into a line separator when collapsed
  • Fix: conditional render <hr> vs label text
• On hover on sidebar collapse handle, cursor should change to resize cursor
  • Fix: add cursor: col-resize in CSS