website-monitor/frontend/components/layout/dashboard-layout.tsx

50 lines
1.6 KiB
TypeScript

'use client'
import { useEffect } from 'react'
import { useRouter } from 'next/navigation'
import { isAuthenticated } from '@/lib/auth'
import { Sidebar } from '@/components/layout/sidebar'
interface DashboardLayoutProps {
children: React.ReactNode
title?: string
description?: string
}
export function DashboardLayout({ children, title, description }: DashboardLayoutProps) {
const router = useRouter()
useEffect(() => {
if (!isAuthenticated()) {
router.push('/login')
}
}, [router])
return (
<div className="min-h-screen bg-background">
<Sidebar />
{/* Main Content Area - responsive margin for sidebar */}
<div className="lg:pl-64">
{/* Header */}
{(title || description) && (
<header className="sticky top-0 z-30 border-b border-border/50 bg-background/80 backdrop-blur-lg">
<div className="px-8 py-6 pl-16 lg:pl-8">
{title && <h1 className="text-2xl font-bold">{title}</h1>}
{description && (
<p className="mt-1 text-sm text-muted-foreground">{description}</p>
)}
</div>
</header>
)}
{/* Page Content - extra top padding on mobile for hamburger button */}
<main className="p-8 pt-4 lg:pt-8">
{children}
</main>
</div>
</div>
)
}