Spaces:
Runtime error
Runtime error
File size: 2,869 Bytes
24727a3 27bb290 0c7012b 24727a3 27bb290 0c7012b 27bb290 24727a3 0c7012b 24727a3 27bb290 0c7012b 27bb290 24727a3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 | import { useState } from 'react'
import { Outlet } from 'react-router-dom'
import { Menu } from 'lucide-react'
import { ClientSidebar } from './ClientSidebar'
import { NotificationBell } from '../shared/NotificationBell'
import { useAuthStore } from '../../store/authStore'
import { useSiteSettings } from '../../hooks/useSiteSettings'
export default function ClientLayout() {
const [sidebarOpen, setSidebarOpen] = useState(false)
const user = useAuthStore(s => s.user)
const { data: landingContent } = useSiteSettings()
const logoUrl = landingContent?.site?.logoUrl
const initials = user ? `${user.firstName?.[0] || ''}${user.lastName?.[0] || ''}` : 'C'
return (
<div className="min-h-screen bg-gray-50 flex">
<ClientSidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
<div className="flex-1 flex flex-col min-h-screen">
<header className="h-16 bg-white border-b flex items-center px-6 gap-4 md:hidden">
<button onClick={() => setSidebarOpen(true)} className="p-1 hover:bg-gray-100 rounded-lg">
<Menu className="w-6 h-6" />
</button>
<div className="flex items-center gap-2">
{logoUrl ? (
<img src={logoUrl} alt="Templyn" className="h-7 w-auto" />
) : (
<>
<div className="w-7 h-7 rounded-lg bg-gradient-to-br from-brand-500 to-accent-500 flex items-center justify-center">
<span className="text-white font-bold text-xs">DF</span>
</div>
<span className="font-bold text-base">Templyn</span>
</>
)}
</div>
</header>
<header className="h-16 bg-white border-b hidden md:flex items-center justify-between px-6 gap-3">
<div className="flex items-center gap-2">
{logoUrl ? (
<img src={logoUrl} alt="Templyn" className="h-7 w-auto" />
) : (
<>
<div className="w-7 h-7 rounded-lg bg-gradient-to-br from-brand-500 to-accent-500 flex items-center justify-center">
<span className="text-white font-bold text-xs">DF</span>
</div>
<span className="font-bold text-base text-gray-900">Templyn</span>
</>
)}
</div>
<div className="flex items-center gap-3">
<span className="text-sm text-gray-600 font-medium">{user?.firstName} {user?.lastName}</span>
<NotificationBell basePath="/client" />
<div className="w-8 h-8 rounded-full bg-brand-100 text-brand-700 flex items-center justify-center text-sm font-bold">
{initials}
</div>
</div>
</header>
<main className="flex-1 p-6 overflow-auto">
<Outlet />
</main>
</div>
</div>
)
}
|