manifold/web/components/page.tsx

59 lines
1.5 KiB
TypeScript
Raw Normal View History

import clsx from 'clsx'
import { ReactNode } from 'react'
import { BottomNavBar } from './nav/nav-bar'
import Sidebar from './nav/sidebar'
import { Toaster } from 'react-hot-toast'
export function Page(props: {
margin?: boolean
assertUser?: 'signed-in' | 'signed-out'
rightSidebar?: ReactNode
2022-04-11 21:13:26 +00:00
suspend?: boolean
children?: ReactNode
}) {
const { margin, assertUser, children, rightSidebar, suspend } = props
return (
<>
<div
className={clsx(
2022-04-04 04:37:14 +00:00
'mx-auto w-full pb-14 lg:grid lg:grid-cols-12 lg:gap-8 lg:pt-6 xl:max-w-7xl',
margin && 'px-4'
)}
2022-04-11 21:13:26 +00:00
style={suspend ? visuallyHiddenStyle : undefined}
>
<Toaster />
<Sidebar className="sticky top-4 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:block" />
<main
className={clsx(
2022-04-03 21:57:38 +00:00
'lg:col-span-8',
rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8'
)}
>
{children}
{/* If right sidebar is hidden, place its content at the bottom of the page. */}
<div className="mt-4 block xl:hidden">{rightSidebar}</div>
</main>
<aside className="hidden xl:col-span-3 xl:block">
<div className="sticky top-4 space-y-4">{rightSidebar}</div>
</aside>
</div>
<BottomNavBar />
</>
)
}
2022-04-11 21:13:26 +00:00
const visuallyHiddenStyle = {
clip: 'rect(0 0 0 0)',
clipPath: 'inset(50%)',
height: 1,
margin: -1,
overflow: 'hidden',
padding: 0,
position: 'absolute',
width: 1,
whiteSpace: 'nowrap',
} as const