feat(ui): fixed header & sider

This commit is contained in:
Fu Diwei 2024-12-18 20:45:27 +08:00
parent 2712f9a3f4
commit afa446aabe

View File

@ -51,8 +51,8 @@ const ConsoleLayout = () => {
} }
return ( return (
<Layout className="w-full min-h-screen"> <Layout className="min-h-screen" hasSider>
<Layout.Sider className="max-md:hidden" theme="light" width={256}> <Layout.Sider className="max-md:hidden max-md:static fixed top-0 left-0 h-full z-[9]" width="256px" theme="light">
<div className="flex flex-col items-center justify-between w-full h-full overflow-hidden"> <div className="flex flex-col items-center justify-between w-full h-full overflow-hidden">
<div className="w-full"> <div className="w-full">
<SiderMenu /> <SiderMenu />
@ -63,8 +63,8 @@ const ConsoleLayout = () => {
</div> </div>
</Layout.Sider> </Layout.Sider>
<Layout> <Layout className="pl-[256px] max-md:pl-0">
<Layout.Header style={{ padding: 0, background: themeToken.colorBgContainer }}> <Layout.Header className="sticky top-0 left-0 right-0 p-0 z-[8] shadow-sm" style={{ background: themeToken.colorBgContainer }}>
<div className="flex items-center justify-between size-full px-4 overflow-hidden"> <div className="flex items-center justify-between size-full px-4 overflow-hidden">
<div className="flex items-center gap-4 size-full"> <div className="flex items-center gap-4 size-full">
<Button className="md:hidden" icon={<MenuIcon />} size="large" onClick={handleSiderOpen} /> <Button className="md:hidden" icon={<MenuIcon />} size="large" onClick={handleSiderOpen} />
@ -99,7 +99,7 @@ const ConsoleLayout = () => {
</div> </div>
</Layout.Header> </Layout.Header>
<Layout.Content> <Layout.Content style={{ overflow: "initial" }}>
<div className="p-4"> <div className="p-4">
<Outlet /> <Outlet />
</div> </div>