Skip to content

feat(apollo-vertex): migrate shell sidebar to shadcn SidebarProvider with sub-nav#681

Open
petervachon wants to merge 1 commit into
mainfrom
feat/vertex-shell-sidebar
Open

feat(apollo-vertex): migrate shell sidebar to shadcn SidebarProvider with sub-nav#681
petervachon wants to merge 1 commit into
mainfrom
feat/vertex-shell-sidebar

Conversation

@petervachon
Copy link
Copy Markdown
Collaborator

What

Replaces the hand-rolled @mantine/hooks useLocalStorage-based sidebar with the shadcn SidebarProvider primitive, and rebuilds the nav rendering to support collapsible sub-navigation groups.

Behavioral changes:

  • Collapsed/expanded state now persists via a sidebar_state cookie (refresh-safe, per reviewer feedback on Creilly11235/vertex shell sidebar provider migration #577)
  • Removed bespoke NavItem component in favour of inline shadcn SidebarMenuButton / SidebarMenuSub / SidebarMenuSubButton composition
  • Parent items with subItems render as collapsible groups with a rotating chevron; clicking a parent while the sidebar is collapsed expands the sidebar and opens the group simultaneously
  • Active state is computed from useLocation — exact match for root /, prefix match for all other paths
  • ShellSidebar export renamed from Sidebar to avoid collision with the shadcn Sidebar primitive

Lines changed: ~338 additions / 167 deletions (M-sized slice)

Test plan

  • Sidebar collapses and expands via the toggle button
  • Collapsed state survives a browser refresh
  • Hovering the collapsed sidebar triggers the visual expand hint and icon scale
  • Nav items without sub-items navigate correctly; active item is highlighted
  • Nav items with sub-items expand/collapse on click; active sub-item highlights the row and marks the parent
  • Clicking a parent while sidebar is collapsed expands the sidebar and opens the group
  • Dark mode: sidebar uses correct dark tokens, no harsh whites
  • Minimal header variant still renders correctly

🤖 Generated with Claude Code

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 11, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Review Updated (PT)
apollo-design 🟢 Ready Preview, Logs May 20, 2026, 02:52:16 PM
apollo-docs 🟢 Ready Preview, Logs May 20, 2026, 02:52:16 PM
apollo-landing 🟢 Ready Preview, Logs May 20, 2026, 02:52:16 PM
apollo-ui-react 🟢 Ready Preview, Logs May 20, 2026, 02:52:16 PM
apollo-vertex 🟢 Ready Preview, Logs May 20, 2026, 02:52:16 PM

@KokoMilev KokoMilev enabled auto-merge (rebase) May 11, 2026 16:01
@github-actions github-actions Bot added the size:XL 500-999 changed lines. label May 11, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented May 11, 2026

Dependency License Review

  • 1901 package(s) scanned
  • ✅ No license issues found
  • ⚠️ 2 package(s) excluded (see details below)
License distribution
License Packages
MIT 1671
ISC 89
Apache-2.0 55
BSD-3-Clause 27
BSD-2-Clause 23
BlueOak-1.0.0 8
MPL-2.0 4
MIT-0 3
CC0-1.0 3
MIT OR Apache-2.0 2
(MIT OR Apache-2.0) 2
Unlicense 2
LGPL-3.0-or-later 1
Python-2.0 1
CC-BY-4.0 1
(MPL-2.0 OR Apache-2.0) 1
Unknown 1
Artistic-2.0 1
(WTFPL OR MIT) 1
(BSD-2-Clause OR MIT OR Apache-2.0) 1
CC-BY-3.0 1
0BSD 1
(MIT OR CC0-1.0) 1
MIT AND ISC 1
Excluded packages
Package Version License Reason
@img/sharp-libvips-linux-x64 1.2.4 LGPL-3.0-or-later LGPL pre-built binary, not linked
khroma 2.1.0 Unknown MIT per GitHub repo, missing license field in package.json

<div className="h-screen overflow-hidden flex bg-background dark:bg-sidebar relative">
<SidebarProvider
defaultOpen
style={SIDEBAR_WIDTHS}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can the widths be set globally?

Comment on lines +138 to +146
useEffect(() => {
const expanded = new Set<string>();
for (const item of navItems) {
if (item.subItems?.some((sub) => pathname.startsWith(sub.path))) {
expanded.add(item.path);
}
}
setExpandedItems(expanded);
}, [pathname, navItems]);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Setting state in an effect is an anti-pattern. I thought we set up a lint rule and added instructions to CLAUDE.md, but looks like it added this anyway 🤔

Comment on lines +149 to +162
if (isCollapsed) {
toggleSidebar();
setExpandedItems((prev) => new Set(prev).add(path));
} else {
setExpandedItems((prev) => {
const next = new Set(prev);
if (next.has(path)) {
next.delete(path);
} else {
next.add(path);
}
return next;
});
}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nested ternary logic affects readability. Can we use early returns instead?

Comment on lines +166 to +169
if (path === "/") {
return pathname === "/";
}
return pathname === path || pathname.startsWith(`${path}/`);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
if (path === "/") {
return pathname === "/";
}
return pathname === path || pathname.startsWith(`${path}/`);
return pathname === "/"; || pathname === path || pathname.startsWith(`${path}/`);

@petervachon petervachon force-pushed the feat/vertex-shell-sidebar branch from 687670b to 1637691 Compare May 12, 2026 19:31
@github-actions github-actions Bot added size:L 100-499 changed lines. and removed size:XL 500-999 changed lines. labels May 12, 2026
…with sub-nav

Replaces the hand-built sidebar with the shadcn SidebarProvider stack:

- shell-layout.tsx: wraps layout in SidebarProvider (with SIDEBAR_WIDTHS CSS
  vars), SidebarInset, and a mobile-only SidebarTrigger header. Fixes
  resolvedTheme check so the dark gradient background responds to the system
  theme preference. Uses useId() on the SVG noise filter to avoid duplicate
  DOM IDs when multiple shell instances render
- shell-sidebar.tsx: migrates from motion.aside + useLocalStorage to the
  shadcn Sidebar component. Open/closed state is now persisted via a
  sidebar_state cookie (refresh-safe). Adds sub-nav support via Collapsible
  with expandedItems tracking the active route on mount. Animated text labels
  use AnimatePresence + textFadeVariants instead of the old spring. Deletes
  shell-nav-item.tsx (inlined into shell-sidebar)
- shell-company.tsx: minor prop/class alignment
- registry.json: updates shell entry deps and removes shell-nav-item file ref
- Restores icon hover scale (whileHover iconHoverScale) on collapsed nav items
  that was lost during the provider migration

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@petervachon petervachon force-pushed the feat/vertex-shell-sidebar branch from 1637691 to 4f68137 Compare May 20, 2026 21:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

app:apollo-vertex size:L 100-499 changed lines.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants