51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
|
import { useState } from "react"
|
||
|
|
import { Outlet } from "react-router-dom"
|
||
|
|
import { Content, Header, Mask, Navbar, Shell } from "./clients"
|
||
|
|
|
||
|
|
export default function AdminLayout() {
|
||
|
|
const [navbar, setNavbar] = useState(true)
|
||
|
|
|
||
|
|
const toggleNavbar = () => setNavbar(!navbar)
|
||
|
|
return (
|
||
|
|
<div className="relative h-dvh overflow-hidden">
|
||
|
|
<Shell navbar={navbar}>
|
||
|
|
<div className="col-start-1 row-start-1 row-span-2 bg-card overflow-hidden relative z-20">
|
||
|
|
<Navbar navbar={navbar} setNavbar={setNavbar} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="col-start-2 row-start-1 bg-card overflow-hidden relative z-20">
|
||
|
|
<Header navbar={navbar} toggleNavbar={toggleNavbar} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<svg
|
||
|
|
className="col-start-2 row-start-2 w-full h-full z-20 pointer-events-none"
|
||
|
|
preserveAspectRatio="none"
|
||
|
|
>
|
||
|
|
<defs>
|
||
|
|
<mask id="top-left-rounded-mask">
|
||
|
|
<rect width="100%" height="100%" fill="white" />
|
||
|
|
<circle cx="16" cy="16" r="16" fill="black" />
|
||
|
|
<rect x="16" y="0" width="100%" height="32" fill="black" />
|
||
|
|
<rect x="0" y="16" width="32" height="100%" fill="black" />
|
||
|
|
<rect x="16" y="16" width="100%" height="100%" fill="black" />
|
||
|
|
</mask>
|
||
|
|
</defs>
|
||
|
|
<rect
|
||
|
|
width="100%"
|
||
|
|
height="100%"
|
||
|
|
className="fill-card"
|
||
|
|
mask="url(#top-left-rounded-mask)"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
|
||
|
|
<Mask navbar={navbar} setNavbar={setNavbar} />
|
||
|
|
</Shell>
|
||
|
|
|
||
|
|
{/* 用 Outlet 替代 {props.children} */}
|
||
|
|
<Content navbar={navbar}>
|
||
|
|
<Outlet />
|
||
|
|
</Content>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|