diff --git a/docs/dashboard-guide.md b/docs/dashboard-guide.md index 3cf74dc7ed..d27613b07e 100644 --- a/docs/dashboard-guide.md +++ b/docs/dashboard-guide.md @@ -25,7 +25,7 @@ Enable **Left Sidebar Navigation** from **Settings → Experimental Features** t When enabled on desktop or tablet project screens, the sidebar contains the primary destinations (Board, List, Agents, Command Center, Missions, Chat, Documents, Mailbox, and plugin primary views), Header overflow destinations as regular entries (Research, Insights, Skills, Memory, Secrets, Stash Recovery, Evals, Goals, Dev Server, Todos, and plugin overflow views when their flags/plugins are enabled), and a Settings button pinned to the bottom. The Header retains the Fusion brand and project selector, keeps its non-navigation controls, and hides the view-toggle row and **More views** trigger so there is only one canonical navigation surface. -The sidebar can be collapsed to an icon-only rail with accessible labels/titles preserved, and the expanded width can be resized from the right-edge separator. Collapsed state and expanded width are saved in browser `localStorage` (`fusion:left-sidebar-collapsed` and `fusion:left-sidebar-width`) and restored on reload. +A small right-border toggle collapses or expands the sidebar without consuming a navigation row; collapsed rail mode keeps accessible labels/titles preserved, and the expanded width can be resized from the right-edge separator. Collapsed state and expanded width are saved in browser `localStorage` (`fusion:left-sidebar-collapsed` and `fusion:left-sidebar-width`) and restored on reload. On mobile viewports (`<=768px`), the sidebar is not rendered even when the experiment is enabled. The existing bottom `MobileNavBar` remains the navigation surface. diff --git a/packages/dashboard/app/components/LeftSidebarNav.css b/packages/dashboard/app/components/LeftSidebarNav.css index bcba44d744..04edbcc453 100644 --- a/packages/dashboard/app/components/LeftSidebarNav.css +++ b/packages/dashboard/app/components/LeftSidebarNav.css @@ -16,20 +16,25 @@ The experimental sidebar is a persistent desktop/tablet navigation replacement f color: var(--text); } -.left-sidebar-nav__brand { - display: flex; - align-items: center; - justify-content: flex-end; - gap: var(--space-sm); - padding: var(--space-md); - border-bottom: 1px solid var(--border); - min-height: calc(var(--space-2xl) + var(--space-xl)); -} - .left-sidebar-nav__collapse-toggle { flex-shrink: 0; } +.left-sidebar-nav__collapse-toggle--floating { + position: absolute; + top: var(--space-sm); + right: calc((var(--space-lg) + var(--space-xs)) * -1); + z-index: 2; + display: inline-flex; + align-items: center; + justify-content: center; + min-width: calc(var(--space-lg) + var(--space-md)); + min-height: calc(var(--space-lg) + var(--space-md)); + padding: var(--space-xs); + border-radius: var(--radius-full); + box-shadow: var(--shadow-sm); +} + .left-sidebar-nav__list { display: flex; flex: 1; @@ -166,17 +171,12 @@ The experimental sidebar is a persistent desktop/tablet navigation replacement f display: none; } -.left-sidebar-nav--collapsed .left-sidebar-nav__brand, .left-sidebar-nav--collapsed .left-sidebar-nav__item { justify-content: center; padding-right: 0; padding-left: 0; } -.left-sidebar-nav--collapsed .left-sidebar-nav__collapse-toggle { - width: auto; -} - @media (max-width: 768px) { .left-sidebar-nav { display: none; diff --git a/packages/dashboard/app/components/LeftSidebarNav.tsx b/packages/dashboard/app/components/LeftSidebarNav.tsx index b5b4eec6c6..b2272e60d3 100644 --- a/packages/dashboard/app/components/LeftSidebarNav.tsx +++ b/packages/dashboard/app/components/LeftSidebarNav.tsx @@ -396,22 +396,20 @@ export function LeftSidebarNav({ style={isCollapsed ? undefined : { width: sidebarWidth, minWidth: sidebarWidth }} > {/* - FNXC:Navigation 2026-06-20-00:00: - The sidebar no longer renders its own Fusion logo, wordmark, or project dropdown because those affordances already live in the top Header. Keep this brand row as the collapse control host so expanded and rail states retain a reachable toggle without leaving empty logo/project shells. + FNXC:Navigation 2026-06-20-12:00: + The sidebar collapse affordance must not consume a dedicated brand row now that logo, wordmark, and project controls live in Header. Float the single toggle on the resize border so expanded and rail states retain the same reachable click target without an empty header shell. */} -