manifold/web/components/page.tsx
Austin Chen 5c12da140d
Add a left sidebar on desktop (#70)
* Copy in nav from TailwindUI

* Split up nav files

* Hook up sidebar options to the current page

* Tweak padding

* Insert a right sidebar on folds & contracts

* Keep column always centered

* Remove markets and folds from top navbar

* Extract out sidebaricon; link to /about

* Rename to "useFollowedFoldIds"

* Cache followed folds in localstorage

* Remove unused mobile sidebar (for now)

* Remove unused code

* Remove sidebar from landing page

* Tweak resolution panel styling

* Remove the top navbar entirely

* Completely remove the old navbar

* Add "more" and profile link

* Rearrange sidebar ordering

* Remove unused component

* Add Sign In button for logged-out users

* Remove extra options for signed-out users
2022-03-30 16:56:51 -07:00

43 lines
1.1 KiB
TypeScript

import clsx from 'clsx'
import { BottomNavBar } from './nav/nav-bar'
import Sidebar from './nav/sidebar'
export function Page(props: {
wide?: boolean
margin?: boolean
assertUser?: 'signed-in' | 'signed-out'
rightSidebar?: React.ReactNode
children?: any
}) {
const { wide, margin, assertUser, children, rightSidebar } = props
return (
<div>
<div
className={clsx(
'mx-auto w-full pb-16 lg:grid lg:grid-cols-12 lg:gap-8 xl:max-w-7xl',
wide ? 'max-w-6xl' : 'max-w-4xl',
margin && 'px-4'
)}
>
<div className="hidden lg:col-span-3 lg:block xl:col-span-2">
{assertUser !== 'signed-out' && <Sidebar />}
</div>
<main
className={clsx(
'mt-6 lg:col-span-9',
rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8'
)}
>
{children}
</main>
<aside className="hidden xl:col-span-3 xl:block">
<div className="sticky top-4 space-y-4">{rightSidebar}</div>
</aside>
</div>
<BottomNavBar />
</div>
)
}