feat: replace sidebar with 21st.dev hover-to-expand component

Use framer-motion animated sidebar from 21st.dev — collapses to icons,
expands on hover. Phosphor icons instead of lucide. Remove old manual
collapse/expand and sidebar-context. Top bar has Pulse logo + user
actions, sidebar below with site picker and nav groups.
This commit is contained in:
Usman Baig
2026-03-18 16:20:32 +01:00
parent 66a70f676f
commit db5cd4cbcb
7 changed files with 320 additions and 218 deletions

View File

@@ -1,8 +1,7 @@
'use client'
import Sidebar from './Sidebar'
import PulseSidebar from './Sidebar'
import UtilityBar from './UtilityBar'
import { useSidebar } from '@/lib/sidebar-context'
export default function DashboardShell({
siteId,
@@ -11,15 +10,11 @@ export default function DashboardShell({
siteId: string
children: React.ReactNode
}) {
const { mobileOpen, closeMobile } = useSidebar()
return (
<div className="flex flex-col h-screen overflow-hidden">
{/* Top bar: full width — logo left, actions right */}
<UtilityBar />
{/* Below: sidebar + content */}
<div className="flex flex-1 overflow-hidden">
<Sidebar siteId={siteId} mobileOpen={mobileOpen} onMobileClose={closeMobile} />
<PulseSidebar siteId={siteId} />
<main className="flex-1 min-w-0 overflow-y-auto">
{children}
</main>