fix(mobile): update sidebar responsiveness

[jmelahman]

Description

Refactors the Sidebar into a layout components.

Notable functional change, the admin sidebar can now folded on mobile/small screens while on medium/large screens size still disallows the sidebar to be folded.

Related to https://linear.app/onyx-app/issue/ENG-3890/sidebar-breakpoints

How Has This Been Tested?

Expecting minimal behavior on large screens which is captured by playwright.

mobile behavior:

The whitespace is a little off on mobile, but this change is already quite large and resolve that is likely related to a longstanding TODO to standardize the admin pages layout, so will follow up with the change to address this.

Additional Options

• [Optional] Override Linear Check

---

Summary by cubic

Make the App and Admin sidebars slide in on mobile with a backdrop; desktop behavior is unchanged (App sidebar remains foldable). Matches Linear ENG-3890 sidebar breakpoints.

• Bug Fixes

  • App/Admin sidebars open/close on small screens; tap the backdrop or fold button to dismiss.
  • Added a mobile toggle button on admin pages (in ClientLayout) to open the sidebar.
  • Hid section content when the sidebar is folded for a cleaner mobile/compact view.

• Refactors

  • Added shared SidebarLayouts (Root, Header, Body, Footer) and useSidebarFolded in @/layouts/sidebar-layouts to unify mobile overlay and desktop folding.
  • Rewrote AppSidebar and AdminSidebar to use SidebarLayouts; ClientLayout now owns admin fold state and passes folded/onFoldChange.

^{Written for commit e07b3ca. Summary will update on new commits.}

[cubic-dev-ai]

1 issue found across 5 files

Confidence score: 4/5

• This PR is likely safe to merge with minimal risk, since the reported issue is a standards/compliance concern rather than a clear runtime bug.
• The main issue is in web/src/components/admin/ClientLayout.tsx: icon imports should come from web/src/icons instead of @opal/icons, which could cause inconsistency with the frontend conventions in web/AGENTS.md.
• Given the medium severity (6/10) and high confidence (8/10), this is worth fixing soon but does not appear merge-blocking on functionality alone.
• Pay close attention to web/src/components/admin/ClientLayout.tsx - align icon imports with web/src/icons to meet project frontend standards.

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="web/src/components/admin/ClientLayout.tsx">

<violation number="1" location="web/src/components/admin/ClientLayout.tsx:12">
P2: Custom agent: **Frontend standards**

Icon usage in web/AGENTS.md requires icons to come from web/src/icons. Replace the @opal/icons import with the equivalent icon from web/src/icons (or add it there if missing) before using it.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[github-actions]

Preview Deployment

Status	Preview	Commit	Updated
✅	https://onyx-preview-dwlpp66zv-danswer.vercel.app	e07b3ca	2026-04-02 19:36:59 UTC

[greptile-apps]

Greptile Summary

This PR introduces a shared SidebarLayouts module (sidebar-layouts.tsx) to centralize mobile-overlay vs. desktop-foldable sidebar behaviour, replacing duplicated inline logic that previously lived in both AppSidebar and AdminSidebar. The app sidebar now delegates all layout concerns to SidebarLayouts.Root (with foldable), while the admin sidebar uses the same root without foldable so it stays always-expanded on desktop. ClientLayout owns the admin sidebar's fold state and adds a mobile toggle button to the main content area.

Key changes:

• sidebar-layouts.tsx – new composable Root / Header / Body / Footer primitives and a useSidebarFolded() context hook; Root renders a fixed overlay + backdrop on mobile and a standard SidebarWrapper on desktop.
• AppSidebar.tsx – MemoizedAppSidebarInner is now prop-free; reads fold state from context via useSidebarFolded(); the exported AppSidebar wraps it in SidebarLayouts.Root foldable.
• AdminSidebar.tsx – accepts folded / onFoldChange from ClientLayout; uses SidebarLayouts.Root without foldable (desktop is always expanded; mobile uses the overlay pattern).
• ClientLayout.tsx – adds useState(true) for sidebar fold state and a mobile-only sidebar toggle button.

The overall design is clean and the mobile/desktop split is handled correctly. Two minor items to clean up: a docstring example that references a non-existent useSidebarState() hook, and the removed explicit displayName = "AppSidebar" on the memoized inner component.

Confidence Score: 5/5

• Safe to merge — no P0/P1 issues found; all remaining findings are P2 style/documentation clean-ups.
• The refactor correctly centralizes mobile vs. desktop sidebar logic without introducing regressions. Mobile overlay, backdrop, fold-button wiring, and state initialization all behave correctly for both the app and admin sidebars. The two open comments are cosmetic (docstring typo and missing DevTools display name) and do not affect runtime correctness.
• No files require special attention.

Important Files Changed

Filename	Overview
web/src/layouts/sidebar-layouts.tsx	New shared layout module: exports Root, Header, Body, Footer primitives and useSidebarFolded context hook. Correctly handles mobile (fixed overlay + backdrop) vs desktop (optional foldable) rendering split. Minor docstring typo (useSidebarState → useState).
web/src/components/admin/ClientLayout.tsx	Adds local sidebarFolded state and isMobile check; passes fold state to AdminSidebar and renders a mobile-only toggle button. Desktop sidebar always visible because AdminSidebar uses SidebarLayouts.Root without foldable.
web/src/sections/sidebar/AdminSidebar.tsx	Migrated from SidebarWrapper + SidebarBody to SidebarLayouts.Root/Header/Body/Footer. Accepts folded/onFoldChange from ClientLayout. Desktop always expanded (no foldable prop); mobile uses overlay. Clean refactor with no functional regressions found.
web/src/sections/sidebar/AppSidebar.tsx	Refactored MemoizedAppSidebarInner to be prop-free, reading fold state via useSidebarFolded() context. AppSidebar now delegates mobile/desktop split to SidebarLayouts.Root. Explicit displayName = "AppSidebar" was dropped (minor DevTools regression).

Sequence Diagram

sequenceDiagram
    participant User
    participant ClientLayout
    participant SidebarLayouts.Root
    participant SidebarWrapper
    participant AdminSidebar

    Note over ClientLayout: useState(true) → sidebarFolded

    alt Mobile
        User->>ClientLayout: tap toggle button
        ClientLayout->>ClientLayout: setSidebarFolded(false)
        ClientLayout->>AdminSidebar: folded=false
        AdminSidebar->>SidebarLayouts.Root: folded=false (no foldable)
        SidebarLayouts.Root->>SidebarWrapper: renders fixed overlay, folded=false → translate-x-0
        SidebarWrapper-->>User: sidebar slides in

        User->>SidebarLayouts.Root: tap backdrop / fold button
        SidebarLayouts.Root->>ClientLayout: onFoldChange(true)
        ClientLayout->>ClientLayout: setSidebarFolded(true)
        SidebarLayouts.Root->>SidebarWrapper: -translate-x-full
        SidebarWrapper-->>User: sidebar slides out
    else Desktop
        Note over SidebarLayouts.Root: foldable=false → ignores folded prop
        SidebarLayouts.Root->>SidebarWrapper: folded=undefined (always expanded)
        SidebarWrapper-->>User: sidebar always visible
    end

Loading

Prompt To Fix All With AI

This is a comment left during a code review.
Path: web/src/layouts/sidebar-layouts.tsx
Line: 13-16

Comment:
**Docstring references non-existent `useSidebarState` hook**

The example in the module docstring calls `useSidebarState()` which is not exported (or defined) anywhere in this file. A developer following this example would get a "is not a function" runtime error. The correct pattern to source `folded` / `setFolded` is either `useAppSidebarContext()` (for the app sidebar) or a plain `useState(true)` at the call site (as done in `ClientLayout`).

```suggestion
 * function MySidebar() {
 *   const [folded, setFolded] = useState(true);
 *   const contentFolded = useSidebarFolded();
```

How can I resolve this? If you propose a fix, please make it concise.

---

This is a comment left during a code review.
Path: web/src/sections/sidebar/AppSidebar.tsx
Line: 195

Comment:
**`displayName` removed from memoized component**

The previous code explicitly set `MemoizedAppSidebarInner.displayName = "AppSidebar"` so the component appeared as `AppSidebar` in React DevTools and error stack traces. The new named-function form will show it as `Memo(AppSidebarInner)` instead. Consider re-adding the explicit display name to preserve the previous DevTools label:

```suggestion
const MemoizedAppSidebarInner = memo(function AppSidebarInner() {
```

Add after the closing `});`:
```ts
MemoizedAppSidebarInner.displayName = "AppSidebar";
```

How can I resolve this? If you propose a fix, please make it concise.

_{Reviews (5): Last reviewed commit: "fix(mobile): update sidebar responsivene..." | Re-trigger Greptile}

[github-actions]

🖼️ Visual Regression Report

Project	Changed	Added	Removed	Unchanged	Report
admin	0	0	0	165	✅ No changes
exclusive	0	0	0	8	✅ No changes