import { Form, Link, useLocation } from "@remix-run/react"; import type { Employee } from "@prisma/client"; import { useState } from "react"; interface DashboardLayoutProps { children: React.ReactNode; user: Pick; } export default function DashboardLayout({ children, user }: DashboardLayoutProps) { const [sidebarOpen, setSidebarOpen] = useState(false); const [sidebarCollapsed, setSidebarCollapsed] = useState(() => { // Initialize from localStorage if available if (typeof window !== 'undefined') { const saved = localStorage.getItem('sidebar-collapsed'); return saved ? JSON.parse(saved) : false; } return false; }); const toggleSidebar = () => setSidebarOpen(!sidebarOpen); const toggleCollapse = () => { const newCollapsed = !sidebarCollapsed; setSidebarCollapsed(newCollapsed); // Persist to localStorage if (typeof window !== 'undefined') { localStorage.setItem('sidebar-collapsed', JSON.stringify(newCollapsed)); } }; return (
{/* Mobile sidebar overlay */} {sidebarOpen && (
setSidebarOpen(false)} /> )} {/* Navigation */}
{/* Desktop Sidebar */}
{ }} />
{/* Mobile Sidebar */}
setSidebarOpen(false)} />
{/* Main content */}
{children}
); } // Sidebar Content Component function SidebarContent({ user, collapsed, onItemClick }: { user: Pick; collapsed: boolean; onItemClick: () => void; }) { const location = useLocation(); const isActive = (path: string) => { if (path === '/dashboard') { return location.pathname === '/dashboard'; } return location.pathname.startsWith(path); }; const NavItem = ({ to, icon, children, onClick }: { to: string; icon: React.ReactNode; children: React.ReactNode; onClick?: () => void; }) => { const active = isActive(to); return (
  • { onClick?.(); onItemClick(); }} className={`group flex items-center px-2 py-2 text-sm font-medium rounded-md transition-colors duration-150 ${active ? 'bg-indigo-100 text-indigo-900 border-r-2 border-indigo-500' : 'text-gray-900 hover:bg-gray-50 hover:text-gray-900' }`} title={collapsed ? children?.toString() : undefined} >
    {icon}
    {!collapsed && ( {children} )}
    • ); }; const SectionHeader = ({ children }: { children: React.ReactNode }) => (
  • {!collapsed && (
    {children}
    )} {collapsed &&
    }
    • ); return ( ); }