Collapse main app sidebar to icon rail with in-sidebar toggle#4723
Open
dcrjodle wants to merge 5 commits into
Open
Collapse main app sidebar to icon rail with in-sidebar toggle#4723dcrjodle wants to merge 5 commits into
dcrjodle wants to merge 5 commits into
Conversation
On desktop the main app sidebar now collapses to a 48px icon rail
instead of sliding fully offscreen: menu items render icon-only with
tooltips (label-initial fallback for icon-less items), group headers
fade out, and clicking a collapsed section expands the sidebar with
that section open. The toggle button moves from floating over the main
content into the bottom of the sidebar; the floating toggle remains
only for the mobile drawer, and the tab bar no longer reserves space
for it on desktop (pl-10 -> md:pl-2).
New optional SidebarLayout slots SidebarHeaderCollapsed and
SidebarFooterCollapsed let shells swap in rail-sized header/footer
content; without them the header/footer hide while collapsed. A new
SidebarLayoutContext exposes {collapsed, expand, toggle} to sidebar
widgets. Search-result rendering is suppressed while collapsed.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
dcrjodle
marked this pull request as draft
July 17, 2026 09:26
The collapsed rail now aligns the menu-item icons with the New Plan button and toggle icons: labels collapse to zero width (not just opacity) so each button shrinks to icon width and centers cleanly, the SidebarContent wrapper is width-constrained so centering isn't thrown off by the scroll gutter, and collapsed menu buttons drop their inline padding/gap. The sidebar toggle moves from the bottom of the sidebar to the top-right (top-center in the rail). Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
When expanded, the toggle now overlays the top-right corner of the header area (aligned with the top of the title) instead of occupying its own row above the header, which had pushed the title down. In the rail it stays a centered row at the top. Extracted the shared button markup into SidebarToggleButton. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Widen the icon rail from 48px to 54px so it matches the menu item icon box (icons no longer clipped), and add spacing below the toggle button so it isn't flush against the collapsed header's first action. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Collaborator
Author
|
Uploading Screen Recording 2026-07-17 at 13.52.04.mov… |
dcrjodle
marked this pull request as ready for review
July 17, 2026 11:54
Collapsing the sidebar left the sticky group headers (e.g. "Concepts", "Client Extensions") at their natural width, which forced the whole menu column wider than the 54px rail and pushed icons off-center for apps with long group labels. Give the header w-0 when collapsed so it no longer sets the column min-width. Also drop the desktop tab bar's left padding entirely (md:pl-2 -> md:pl-0) now that the toggle no longer floats over the content. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Collaborator
Staging preview📄 Docs: https://ivy-framework-staging-docs-4723.sliplane.app |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Redesigns the main app sidebar collapse behavior (part of the Tendril chrome redesign; companion PR in Ivy-Tendril):
pl-10→md:pl-2).SidebarLayoutgains optionalSidebarHeaderCollapsed/SidebarFooterCollapsedslots (C# + frontend) so shells can provide rail-sized header/footer content (e.g. an icon-only primary action). Without them, header/footer hide while collapsed.SidebarLayoutContext(useSidebarLayout()) exposes{collapsed, expand, toggle};SidebarMenuWidgetuses it for rail rendering. Search-result rendering is suppressed while collapsed (results would otherwise render clipped inside the 48px rail).Notes for reviewers
DefaultSidebarAppShellconsumers get the rail by default with hidden header/search/footer while collapsed; menu icons (or letter fallbacks) plus the in-rail toggle keep it functional. Wiring collapsed slots intoDefaultSidebarAppShellcould be a follow-up.TabsLayoutwidgets using theTabsvariant lose 32px of left padding on desktop (pl-10existed to clear the floating toggle).MainAppSidebarunset) are unchanged.Testing
tsc+ vite build clean, 1289 vitest tests pass, lint clean.Ivy.Test1365 tests pass.🤖 Generated with Claude Code