Implement sidebar in a more normal way
This commit is contained in:
Marshall Polaris
parent
aafd2a226f
commit
bd516149dd
|
|
@ -5,18 +5,14 @@ import {
|
|||
MenuAlt3Icon,
|
||||
PresentationChartLineIcon,
|
||||
SearchIcon,
|
||||
XIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import { Transition, Dialog } from '@headlessui/react'
|
||||
import { useState, Fragment } from 'react'
|
||||
import Sidebar from './sidebar'
|
||||
import { useUser } from 'web/hooks/use-user'
|
||||
import { formatMoney } from 'common/util/format'
|
||||
import { Avatar } from '../avatar'
|
||||
|
||||
// From https://codepen.io/chris__sev/pen/QWGvYbL
|
||||
export function BottomNavBar() {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false)
|
||||
export function BottomNavBar(props: { toggleSidebar: () => void }) {
|
||||
const { toggleSidebar } = props
|
||||
|
||||
const user = useUser()
|
||||
|
||||
|
|
@ -50,7 +46,7 @@ export function BottomNavBar() {
|
|||
|
||||
<div
|
||||
className="w-full select-none py-1 px-3 text-center hover:cursor-pointer hover:bg-indigo-200 hover:text-indigo-700"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
onClick={() => toggleSidebar()}
|
||||
>
|
||||
{user === null ? (
|
||||
<>
|
||||
|
|
@ -72,80 +68,6 @@ export function BottomNavBar() {
|
|||
<></>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<MobileSidebar
|
||||
sidebarOpen={sidebarOpen}
|
||||
setSidebarOpen={setSidebarOpen}
|
||||
/>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
// Sidebar that slides out on mobile
|
||||
export function MobileSidebar(props: {
|
||||
sidebarOpen: boolean
|
||||
setSidebarOpen: (open: boolean) => void
|
||||
}) {
|
||||
const { sidebarOpen, setSidebarOpen } = props
|
||||
return (
|
||||
<div>
|
||||
<Transition.Root show={sidebarOpen} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
className="fixed inset-0 z-40 flex"
|
||||
onClose={setSidebarOpen}
|
||||
>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="transition-opacity ease-linear duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="transition-opacity ease-linear duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<Dialog.Overlay className="fixed inset-0 bg-gray-600 bg-opacity-75" />
|
||||
</Transition.Child>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="transition ease-in-out duration-300 transform"
|
||||
enterFrom="-translate-x-full"
|
||||
enterTo="translate-x-0"
|
||||
leave="transition ease-in-out duration-300 transform"
|
||||
leaveFrom="translate-x-0"
|
||||
leaveTo="-translate-x-full"
|
||||
>
|
||||
<div className="relative flex w-full max-w-xs flex-1 flex-col bg-white pt-5 pb-4">
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
enter="ease-in-out duration-300"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
leave="ease-in-out duration-300"
|
||||
leaveFrom="opacity-100"
|
||||
leaveTo="opacity-0"
|
||||
>
|
||||
<div className="absolute top-0 right-0 -mr-12 pt-2">
|
||||
<button
|
||||
type="button"
|
||||
className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
>
|
||||
<span className="sr-only">Close sidebar</span>
|
||||
<XIcon className="h-6 w-6 text-white" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
<div className="mx-2 mt-5 h-0 flex-1 overflow-y-auto">
|
||||
<Sidebar className="pl-2" />
|
||||
</div>
|
||||
</div>
|
||||
</Transition.Child>
|
||||
<div className="w-14 flex-shrink-0" aria-hidden="true">
|
||||
{/* Dummy element to force sidebar to shrink to fit close icon */}
|
||||
</div>
|
||||
</Dialog>
|
||||
</Transition.Root>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import {
|
|||
CashIcon,
|
||||
HeartIcon,
|
||||
PresentationChartLineIcon,
|
||||
XIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import clsx from 'clsx'
|
||||
import _ from 'lodash'
|
||||
|
|
@ -108,8 +109,31 @@ function MoreButton() {
|
|||
)
|
||||
}
|
||||
|
||||
export default function Sidebar(props: { className?: string }) {
|
||||
const { className } = props
|
||||
function CloseButton(props: { onClick: React.MouseEventHandler }) {
|
||||
return (
|
||||
<div className="absolute top-0 right-0 -mr-12 pt-2 lg:hidden">
|
||||
<button
|
||||
className="ml-1 flex h-10 w-10 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
|
||||
onClick={props.onClick}
|
||||
>
|
||||
<span className="sr-only">Close sidebar</span>
|
||||
<XIcon className="h-6 w-6 text-white" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ModalOverlay(props: { onClick: React.MouseEventHandler }) {
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-40 flex overflow-auto bg-gray-600 bg-opacity-75 lg:hidden"
|
||||
onClick={props.onClick}
|
||||
></div>
|
||||
)
|
||||
}
|
||||
|
||||
export default function Sidebar(props: { open: boolean; onClose: () => void }) {
|
||||
const { open, onClose } = props
|
||||
const router = useRouter()
|
||||
const currentPage = router.pathname
|
||||
|
||||
|
|
@ -122,69 +146,92 @@ export default function Sidebar(props: { className?: string }) {
|
|||
const mobileNavigationOptions =
|
||||
user === null ? signedOutMobileNavigation : mobileNavigation
|
||||
|
||||
// TODO: I think this whole business would be simpler if the outer layout was flexbox...
|
||||
const sidebarClass = clsx(
|
||||
'lg:p-0 lg:pt-0 lg:bg-inherit lg:top-4 lg:sticky lg:col-span-2 lg:self-start lg:w-auto',
|
||||
'p-4 pt-5 fixed bg-white w-80 transition-[left] duration-300 h-screen z-50 divide-gray-300',
|
||||
open ? 'left-0' : '-left-80'
|
||||
)
|
||||
|
||||
return (
|
||||
<nav aria-label="Sidebar" className={className}>
|
||||
<ManifoldLogo className="pb-6" twoLine />
|
||||
<div className="mb-2" style={{ minHeight: 80 }}>
|
||||
{user ? (
|
||||
<ProfileSummary user={user} />
|
||||
) : user === null ? (
|
||||
<div className="py-6 text-center">
|
||||
<button
|
||||
className="btn btn-sm border-2 bg-white px-6 font-medium normal-case text-gray-700"
|
||||
onClick={firebaseLogin}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
<>
|
||||
{open && <ModalOverlay onClick={onClose} />}
|
||||
<nav aria-label="Sidebar" className={sidebarClass}>
|
||||
{open && <CloseButton onClick={onClose} />}
|
||||
<ManifoldLogo className="pb-6" twoLine />
|
||||
<div className="mb-2" style={{ minHeight: 80 }}>
|
||||
{user ? (
|
||||
<ProfileSummary user={user} />
|
||||
) : user === null ? (
|
||||
<div className="py-6 text-center">
|
||||
<button
|
||||
className="btn btn-sm border-2 bg-white px-6 font-medium normal-case text-gray-700"
|
||||
onClick={firebaseLogin}
|
||||
>
|
||||
Sign in
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 lg:hidden">
|
||||
{mobileNavigationOptions.map((item) => (
|
||||
<SidebarItem
|
||||
key={item.name}
|
||||
item={item}
|
||||
currentPage={currentPage}
|
||||
/>
|
||||
))}
|
||||
|
||||
{user && (
|
||||
<MenuButton
|
||||
menuItems={[
|
||||
{
|
||||
name: 'Sign out',
|
||||
href: '#',
|
||||
onClick: () => firebaseLogout(),
|
||||
},
|
||||
]}
|
||||
buttonContent={<MoreButton />}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="hidden space-y-1 lg:block">
|
||||
{navigationOptions.map((item) => (
|
||||
<SidebarItem
|
||||
key={item.name}
|
||||
item={item}
|
||||
currentPage={currentPage}
|
||||
/>
|
||||
))}
|
||||
|
||||
<MenuButton
|
||||
menuItems={getNavigationOptions(user)}
|
||||
buttonContent={<MoreButton />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{deservesDailyFreeMarket ? (
|
||||
<div className=" text-primary mt-4 text-center">
|
||||
Use your daily free market! 🎉
|
||||
</div>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-1 lg:hidden">
|
||||
{mobileNavigationOptions.map((item) => (
|
||||
<SidebarItem key={item.name} item={item} currentPage={currentPage} />
|
||||
))}
|
||||
|
||||
{user && (
|
||||
<MenuButton
|
||||
menuItems={[
|
||||
{ name: 'Sign out', href: '#', onClick: () => firebaseLogout() },
|
||||
]}
|
||||
buttonContent={<MoreButton />}
|
||||
/>
|
||||
<div className={'aligncenter flex justify-center'}>
|
||||
<Link href={'/create'}>
|
||||
<button className="btn btn-primary btn-md mt-4 capitalize">
|
||||
Create Market
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="hidden space-y-1 lg:block">
|
||||
{navigationOptions.map((item) => (
|
||||
<SidebarItem key={item.name} item={item} currentPage={currentPage} />
|
||||
))}
|
||||
|
||||
<MenuButton
|
||||
menuItems={getNavigationOptions(user)}
|
||||
buttonContent={<MoreButton />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{deservesDailyFreeMarket ? (
|
||||
<div className=" text-primary mt-4 text-center">
|
||||
Use your daily free market! 🎉
|
||||
</div>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
|
||||
{user && (
|
||||
<div className={'aligncenter flex justify-center'}>
|
||||
<Link href={'/create'}>
|
||||
<button className="btn btn-primary btn-md mt-4 capitalize">
|
||||
Create Market
|
||||
</button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
</nav>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import clsx from 'clsx'
|
||||
import { useState } from 'react'
|
||||
import { BottomNavBar } from './nav/nav-bar'
|
||||
import Sidebar from './nav/sidebar'
|
||||
|
||||
|
|
@ -10,6 +11,7 @@ export function Page(props: {
|
|||
children?: any
|
||||
}) {
|
||||
const { margin, assertUser, children, rightSidebar, suspend } = props
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false)
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -20,7 +22,7 @@ export function Page(props: {
|
|||
)}
|
||||
style={suspend ? visuallyHiddenStyle : undefined}
|
||||
>
|
||||
<Sidebar className="sticky top-4 hidden divide-gray-300 self-start pl-2 lg:col-span-2 lg:block" />
|
||||
<Sidebar open={sidebarOpen} onClose={() => setSidebarOpen(false)} />
|
||||
<main
|
||||
className={clsx(
|
||||
'lg:col-span-8',
|
||||
|
|
@ -36,8 +38,7 @@ export function Page(props: {
|
|||
<div className="sticky top-4 space-y-4">{rightSidebar}</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<BottomNavBar />
|
||||
<BottomNavBar toggleSidebar={() => setSidebarOpen(!sidebarOpen)} />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user