video-flow-b/components/layout/dashboard-layout.tsx
2025-08-30 19:24:23 +08:00

27 lines
817 B
TypeScript

"use client";
import { useState } from 'react';
import { Sidebar } from './sidebar';
import { TopBar } from './top-bar';
interface DashboardLayoutProps {
children: React.ReactNode;
}
export function DashboardLayout({ children }: DashboardLayoutProps) {
const [sidebarCollapsed, setSidebarCollapsed] = useState(true); // 默认收起状态
return (
<div className=" min-h-screen bg-background">
<TopBar collapsed={sidebarCollapsed} />
<Sidebar collapsed={sidebarCollapsed} onToggle={setSidebarCollapsed} />
<div className="h-[calc(100vh-4rem)] top-[4rem] fixed right-0 bottom-0 z-[999]" style={{
left: sidebarCollapsed ? '4rem' : '16rem',
width: sidebarCollapsed ? 'calc(100vw - 4rem)' : 'calc(100vw - 16rem)'
}}>
{children}
</div>
</div>
);
}