61 lines
1.5 KiB
TypeScript
61 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { ReactNode, useEffect } from 'react'
|
|
import { Sidebar, Header, MobileNav } from '@/components/layout'
|
|
import { useSidebar } from '@/app/providers'
|
|
import { useAlerts } from '@/components/alerts'
|
|
|
|
interface DashboardLayoutProps {
|
|
children: ReactNode
|
|
title: string
|
|
}
|
|
|
|
export function DashboardLayout({ children, title }: DashboardLayoutProps) {
|
|
const { isOpen, toggle, close, open } = useSidebar()
|
|
const { unreadCount } = useAlerts()
|
|
|
|
// Ensure sidebar is open on desktop mount
|
|
useEffect(() => {
|
|
const handleResize = () => {
|
|
if (window.innerWidth >= 1024) {
|
|
open()
|
|
} else {
|
|
close()
|
|
}
|
|
}
|
|
|
|
// Initial check
|
|
handleResize()
|
|
|
|
window.addEventListener('resize', handleResize)
|
|
return () => window.removeEventListener('resize', handleResize)
|
|
}, [open, close])
|
|
|
|
return (
|
|
<div className="flex min-h-screen bg-slate-950">
|
|
{/* Sidebar */}
|
|
<Sidebar
|
|
isOpen={isOpen}
|
|
onClose={close}
|
|
unreadAlertsCount={unreadCount}
|
|
/>
|
|
|
|
{/* Main content wrapper */}
|
|
<div className="flex flex-1 flex-col lg:ml-0 min-w-0">
|
|
{/* Header */}
|
|
<Header onMenuClick={toggle} title={title} />
|
|
|
|
{/* Page content */}
|
|
<main className="flex-1 p-4 md:p-6 lg:p-8 pb-24 lg:pb-8">
|
|
<div className="mx-auto max-w-7xl h-full">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
<MobileNav unreadAlertsCount={unreadCount} />
|
|
</div>
|
|
)
|
|
}
|