Context is Everything logo

Navigation Redesign: Hamburger Menu + Account Icon

Problem

The current horizontal tab bar has 8 items (Chat, Files, Workflows, Skills, Agents, Tools, Meeting Room, Debug) and takes up significant vertical space. The bottom action bar in the sidebar duplicates concerns (settings, logout). The UI needs to be cleaner and more organized.

Design

Replace the tab bar and bottom action bar with two icons in the top-right corner of the main content area:

  1. Hamburger icon — opens a dropdown popover with grouped app navigation
  2. Account avatar — opens a dropdown with user info, settings, and logout

Chat remains the default/always-visible view and does not appear in either menu.

Header Bar

  • Slim bar at the top of the main content area (right of sidebar)
  • Contains only two elements, right-aligned: hamburger icon (rounded square) + account avatar (circle with user initial)
  • Replaces the entire horizontal tab bar
  • Minimal height to maximize chat/content space

Hamburger Menu (App Navigation)

Dropdown popover anchored below the hamburger icon. Grouped with section headers and dividers:

Group Items
Content Files
AI / Automation Workflows, Skills, Agents
Communication Meeting Room
System Tools, Reporting, Debug

Each item has an icon and label. Clicking an item switches the active panel (same setActiveTab behavior as current tabs) and closes the menu. Click outside to dismiss.

Account Menu (User & Settings)

Dropdown popover anchored below the account avatar:

  • User info card — avatar, username, role (from current auth state)
  • Settings — opens the existing settings modal
  • Report Issue — opens the existing report issue flow
  • Sign Out — triggers existing logout confirmation modal

Bottom Action Bar

Removed entirely. Its items are redistributed:

  • Settings → Account menu
  • Reporting → Hamburger menu (System group)
  • Report Issue → Account menu
  • Logout → Account menu (as "Sign Out")
  • Collapse/expand sidebar toggle — remains on the sidebar if needed, or removed

Sidebar Changes

  • Session list stays as-is
  • Bottom action bar removed
  • No other changes to sidebar structure

Mobile Considerations

Mobile nav (MobileNav.jsx) is a separate concern and is not changed in this spec. The hamburger/account pattern works well on mobile too but adapting MobileNav is out of scope.

Affected Files

File Change
src/components/MainContent.jsx Remove tab bar rendering (~lines 914-1173), add slim header with two icons
src/components/MainContent.jsx Add AppMenu dropdown component (or extract to new file)
src/components/MainContent.jsx Add AccountMenu dropdown component (or extract to new file)
src/components/Sidebar.jsx Remove BottomActionBar usage
src/components/BottomActionBar.jsx Delete file (or leave for now if mobile uses it)
src/App.jsx Minimal changes — tab switching logic stays, just the UI trigger changes

All paths relative to claudecodeui/.

Implementation Strategy

Critical constraint: The JSX files involved (MainContent.jsx, Sidebar.jsx, App.jsx) are large and brittle. Changes must be incremental with browser testing after each step.

Suggested order:

  1. Create the new menu components (AppMenu, AccountMenu) as standalone files — test they render
  2. Add the slim header bar to MainContent — test it appears alongside the existing tab bar
  3. Wire up menu items to existing setActiveTab callbacks — test panel switching works
  4. Remove the old tab bar — test everything still works
  5. Remove the bottom action bar from sidebar — test
  6. Clean up any unused code

Out of Scope

  • Mobile navigation (MobileNav.jsx) changes
  • Sidebar structure changes beyond removing bottom action bar
  • New functionality — this is purely a UI reorganization
  • Dark/light theme — menus should respect the existing theme system