27 lines
611 B
TypeScript
27 lines
611 B
TypeScript
import type { ReactNode } from "react"
|
|
import { useEffect, useRef, useState } from "react"
|
|
|
|
export function SidebarLayout({
|
|
sidebar,
|
|
body,
|
|
}: {
|
|
sidebar: ReactNode
|
|
body: ReactNode
|
|
}) {
|
|
const [offsetTop, setOffsetTop] = useState(0)
|
|
const sidebarRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
setOffsetTop(sidebarRef.current?.offsetTop ?? 0)
|
|
}, [sidebarRef])
|
|
|
|
return (
|
|
<div className="flex items-start gap-6">
|
|
<div className="w-64 sticky" style={{ top: offsetTop }} ref={sidebarRef}>
|
|
{sidebar}
|
|
</div>
|
|
<div className="flex-1">{body}</div>
|
|
</div>
|
|
)
|
|
}
|