44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import type React from "react"
|
|
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Menu, X, LogOut } from "lucide-react"
|
|
import { Sidebar } from "@/components/layout/sidebar"
|
|
import { Header } from "@/components/layout/header"
|
|
|
|
export default function DashboardLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode
|
|
}) {
|
|
const [sidebarOpen, setSidebarOpen] = useState(true)
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden">
|
|
{/* Mobile sidebar toggle */}
|
|
<div className="fixed top-4 left-4 z-50 md:hidden">
|
|
<Button variant="outline" size="icon" onClick={() => setSidebarOpen(!sidebarOpen)}>
|
|
{sidebarOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div
|
|
className={`bg-background border-r w-64 flex-shrink-0 transition-all duration-300 ease-in-out ${
|
|
sidebarOpen ? "translate-x-0" : "-translate-x-full"
|
|
} md:translate-x-0 fixed md:relative z-40 h-full`}
|
|
>
|
|
<Sidebar />
|
|
</div>
|
|
|
|
{/* Main content */}
|
|
<div className="flex-1 flex flex-col overflow-hidden">
|
|
<Header />
|
|
<main className="flex-1 overflow-y-auto p-6">{children}</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|