feat(apollo-vertex): migrate sidebar and shell to match MRS patterns

Align sidebar registry primitives and shell components with the
vertical-medical-mrs implementation: absolute positioning, consistent
collapsed width, duration-300 transitions, proper company component
layout, and dynamic import for the sidebar example template.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: creilly11235

apps/apollo-vertex/app/shadcn-components/sidebar/page.mdx

@@ -1,12 +1,13 @@
+import { SidebarExampleTemplate } from '@/templates/SidebarTemplateDynamic';
+import { PreviewFullScreen } from '@/app/components/preview-full-screen';
+
 # Sidebar
 
 A composable, themeable and customizable sidebar component.
 
-<div className="p-4 border rounded-lg mt-4">
-  <p className="text-sm text-muted-foreground">
-    The Sidebar component is a complex layout component. See the usage example below for implementation details.
-  </p>
-</div>
+<PreviewFullScreen title="Sidebar preview" height={500}>
+    <SidebarExampleTemplate />
+</PreviewFullScreen>
 
 ## Installation
 
@@ -42,19 +43,28 @@ import {
 
 ## Features
 
-- **Collapsible** - Can collapse to icons only
-- **Composable** - Build your own sidebar structure
-- **Themeable** - Supports dark mode and custom themes
-- **Responsive** - Works well on mobile and desktop
-- **Keyboard accessible** - Full keyboard navigation support
+- **Collapsible** - Can collapse to icons only with `collapsible="icon"`
+- **Composable** - Build your own sidebar structure with provided primitives
+- **Themeable** - Supports dark mode and custom themes via CSS variables
+- **Responsive** - Renders as a sheet on mobile, fixed sidebar on desktop
+- **Keyboard accessible** - Toggle with `⌘B`, full keyboard navigation support
 
 ## Components
 
 - `SidebarProvider` - Provides context for sidebar state
 - `Sidebar` - The main sidebar container
 - `SidebarHeader` - Header section of the sidebar
-- `SidebarContent` - Main content area
+- `SidebarContent` - Main scrollable content area
 - `SidebarFooter` - Footer section
 - `SidebarGroup` - Groups related items
+- `SidebarGroupLabel` - Label for a group
+- `SidebarGroupContent` - Content wrapper for a group
 - `SidebarMenu` - Navigation menu
+- `SidebarMenuButton` - Clickable menu button with tooltip support
 - `SidebarMenuItem` - Individual menu items
+- `SidebarMenuSub` - Sub-menu container for nested navigation
+- `SidebarMenuSubButton` - Sub-menu item button
+- `SidebarMenuSubItem` - Sub-menu item wrapper
+- `SidebarInset` - Main content area adjacent to the sidebar
+- `SidebarTrigger` - Button to toggle sidebar open/closed
+- `SidebarRail` - Narrow rail for hover-to-expand interaction

apps/apollo-vertex/app/vertex-components/shell/page.mdx

@@ -19,6 +19,10 @@ Use the `variant="minimal"` prop to render a horizontal header layout instead of
 
 ## Features
 
+- **Collapsible Sidebar**: Icon-only collapsed mode with smooth CSS transitions, built on the shadcn sidebar primitives
+- **Sub-Navigation**: Collapsible menu items with nested sub-items that auto-expand when active
+- **Collapsed Menu Handling**: Clicking a collapsible item while collapsed expands the sidebar and opens the submenu
+- **Custom Logo**: Support for company logos with separate light/dark mode variants
 - **Optional OAuth2 Authentication**: Plug-and-play authorization code flow with PKCE
 - **Theme Toggle**: Built-in light/dark mode support
 - **Language Toggle**: Built-in language switcher for internationalization
@@ -40,7 +44,15 @@ import { ApolloShell } from '@/components/ui/shell';
 
 const navItems = [
   { path: '/dashboard', label: 'dashboard', icon: Home },
-  { path: '/settings', label: 'settings', icon: Settings },
+  {
+    path: '/settings',
+    label: 'settings',
+    icon: Settings,
+    subItems: [
+      { path: '/settings', label: 'settings' },
+      { path: '/settings/appearance', label: 'appearance' },
+    ],
+  },
 ];
 
 function App() {

apps/apollo-vertex/registry.json

@@ -930,23 +930,23 @@
       "description": "Provides UiPath authentication and renders children only when authenticated.",
       "dependencies": [
         "lucide-react",
-        "framer-motion",
         "react-i18next",
         "i18next",
         "jwt-decode",
         "zod",
         "@tanstack/react-query",
         "@tanstack/react-router",
         "pkce-challenge",
-        "sonner",
-        "@mantine/hooks@^9.0.0"
+        "sonner"
       ],
       "registryDependencies": [
         "button",
         "tooltip",
         "avatar",
         "dropdown-menu",
-        "spinner"
+        "spinner",
+        "sidebar",
+        "collapsible"
       ],
       "files": [
         { "path": "registry/shell/shell.tsx", "type": "registry:ui" },
@@ -981,14 +981,6 @@
         { "path": "lib/i18n.ts", "type": "registry:lib" },
         { "path": "lib/auth.ts", "type": "registry:lib" },
         { "path": "lib/react-i18next.d.ts", "type": "registry:lib" },
-        {
-          "path": "registry/shell/shell-animations.ts",
-          "type": "registry:ui"
-        },
-        {
-          "path": "registry/shell/shell-nav-item.tsx",
-          "type": "registry:ui"
-        },
         {
           "path": "registry/shell/shell-minimal-company.tsx",
           "type": "registry:ui"

apps/apollo-vertex/registry/shell/shell-animations.ts

@@ -8,21 +8,24 @@ interface CompanyLogoIconProps {
 
 export const CompanyLogoIcon = ({ companyLogo }: CompanyLogoIconProps) => {
   if (!companyLogo) {
-    return <Box className="w-4 h-4 text-background" />;
+    return <Box className="w-5 h-5 text-sidebar-foreground" />;
   }
 
   return (
     <>
       <img
         src={companyLogo.url}
         alt={companyLogo.alt}
-        className={cn("w-4 h-auto", companyLogo.darkUrl ? "dark:hidden" : "")}
+        className={cn(
+          "h-8 w-8 object-contain",
+          companyLogo.darkUrl ? "dark:hidden" : "",
+        )}
       />
       {companyLogo.darkUrl && (
         <img
           src={companyLogo.darkUrl}
           alt={companyLogo.alt}
-          className="w-4 h-auto hidden dark:block"
+          className="h-8 w-8 object-contain hidden dark:block"
         />
       )}
     </>