fix: sidebar toggle behavior and layout

[Ashish-Reddy-T]

Summary

• Sidebar toggles only via BrowserOS icon or empty space
• Sidebar pushes content instead of overlaying while maintaining the same animation
• Expanded/collapsed state persists across reload
• Slightly larger sidebar icons

Testing

Manual: verified sidebar toggle, visibility, and layout shift

Screenshots

Before:

After:

[github-actions]

All contributors have signed the CLA. Thank you!
_{Posted by the CLA Assistant Lite bot.}

[greptile-apps]

Greptile Summary

Replaces hover-based sidebar expansion with click-based toggle behavior. The sidebar now toggles via clicking the logo icon or empty space (excluding interactive elements marked with data-sidebar-interactive). The expanded/collapsed state persists in localStorage across page reloads. Layout changed from overlay mode to push mode where the sidebar pushes main content rather than overlaying it. Icon sizes slightly increased throughout the sidebar.

• Changed sidebar behavior from hover-expand to click-toggle
• Added localStorage persistence for sidebar state (defaults to collapsed)
• Converted overlay layout to push layout using flexbox
• Made logo clickable to toggle sidebar
• Empty space clicks toggle sidebar (interactive elements excluded via data-sidebar-interactive attribute)
• Increased icon sizes (size-4 → size-5, size-8 → size-9)
• Removed hover handlers and collapse timeout logic
• Changed semantic HTML from div to aside

Confidence Score: 4/5

• Safe to merge with minor cleanup needed
• Implementation is sound with good accessibility (aria-labels, semantic HTML). The interactive element filtering pattern using data-sidebar-interactive works correctly. Only issues are minor code cleanup items: unnecessary fragment wrapper and dead code useEffect
• Pay attention to apps/agent/entrypoints/app/layout/SidebarLayout.tsx which contains dead code that should be removed

Important Files Changed

Filename	Overview
apps/agent/components/sidebar/AppSidebar.tsx	Changed from div to aside with click handler for empty-space toggle; has unnecessary fragment wrapper
apps/agent/components/sidebar/SidebarBranding.tsx	Logo button now toggles sidebar, icon size increased to size-9, theme toggle marked non-interactive
apps/agent/entrypoints/app/layout/SidebarLayout.tsx	Replaced hover expand with click toggle, added localStorage persistence, changed from overlay to push layout; contains dead code useEffect

Sequence Diagram

sequenceDiagram
    participant User
    participant SidebarLayout
    participant AppSidebar
    participant SidebarBranding
    participant localStorage

    Note over SidebarLayout: On mount
    SidebarLayout->>localStorage: getItem('browseros-sidebar-expanded')
    localStorage-->>SidebarLayout: stored value or null
    SidebarLayout->>SidebarLayout: setSidebarOpen(stored === 'true')
    
    Note over User,SidebarBranding: Toggle via logo click
    User->>SidebarBranding: Click logo button
    SidebarBranding->>SidebarBranding: event.stopPropagation()
    SidebarBranding->>SidebarLayout: onToggle()
    SidebarLayout->>SidebarLayout: toggleSidebar()
    SidebarLayout->>localStorage: setItem('browseros-sidebar-expanded', String(!prev))
    SidebarLayout->>AppSidebar: expanded={newValue}
    
    Note over User,AppSidebar: Toggle via empty space click
    User->>AppSidebar: Click empty space
    AppSidebar->>AppSidebar: handleSidebarClick(event)
    AppSidebar->>AppSidebar: Check if target.closest('[data-sidebar-interactive]')
    AppSidebar->>SidebarLayout: onToggle()
    SidebarLayout->>SidebarLayout: toggleSidebar()
    SidebarLayout->>localStorage: setItem('browseros-sidebar-expanded', String(!prev))
    SidebarLayout->>AppSidebar: expanded={newValue}
    
    Note over User,SidebarBranding: Click on interactive element
    User->>SidebarBranding: Click ThemeToggle (data-sidebar-interactive)
    AppSidebar->>AppSidebar: handleSidebarClick detects interactive element
    AppSidebar->>AppSidebar: return early (no toggle)

Loading

[greptile-apps]

Greptile found no issues!

From now on, if a review finishes and we haven't found any issues, we will not post anything, but you can confirm that we reviewed your changes in the status check section.

_{This feature can be toggled off in your Code Review Settings by deselecting "Create a status check for each PR".}

[Ashish-Reddy-T]

I have read the CLA Document and I hereby sign the CLA

[felarof99]

Hey, thanks for the contribution.

But we want to keep the hover based interaction. That was an intended feature.

What was the thought process in changing to click based?