2021-12-20 03:12:12 +00:00
|
|
|
import Link from 'next/link'
|
|
|
|
|
2022-02-01 01:02:17 +00:00
|
|
|
import {
|
|
|
|
HomeIcon,
|
2022-03-31 05:35:20 +00:00
|
|
|
MenuAlt3Icon,
|
2022-04-29 23:35:56 +00:00
|
|
|
PresentationChartLineIcon,
|
2022-02-01 01:02:17 +00:00
|
|
|
SearchIcon,
|
2022-03-31 05:35:20 +00:00
|
|
|
XIcon,
|
2022-02-01 01:02:17 +00:00
|
|
|
} from '@heroicons/react/outline'
|
2022-03-31 05:35:20 +00:00
|
|
|
import { Transition, Dialog } from '@headlessui/react'
|
|
|
|
import { useState, Fragment } from 'react'
|
2022-05-18 19:45:08 +00:00
|
|
|
import Sidebar, { Item } from './sidebar'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { useUser } from 'web/hooks/use-user'
|
|
|
|
import { formatMoney } from 'common/util/format'
|
2022-04-04 21:49:14 +00:00
|
|
|
import { Avatar } from '../avatar'
|
2022-05-18 19:45:08 +00:00
|
|
|
import clsx from 'clsx'
|
|
|
|
import { useRouter } from 'next/router'
|
2022-06-01 13:11:25 +00:00
|
|
|
import NotificationsIcon from 'web/components/notifications-icon'
|
2022-05-28 04:27:37 +00:00
|
|
|
import { useIsIframe } from 'web/hooks/use-is-iframe'
|
2022-06-15 21:34:34 +00:00
|
|
|
import { trackCallback } from 'web/lib/service/analytics'
|
2022-05-18 19:45:08 +00:00
|
|
|
|
2022-05-26 21:41:24 +00:00
|
|
|
function getNavigation(username: string) {
|
2022-05-18 19:45:08 +00:00
|
|
|
return [
|
|
|
|
{ name: 'Home', href: '/home', icon: HomeIcon },
|
|
|
|
{
|
|
|
|
name: 'Portfolio',
|
2022-06-22 17:54:41 +00:00
|
|
|
href: `/${username}?tab=bets`,
|
2022-05-18 19:45:08 +00:00
|
|
|
icon: PresentationChartLineIcon,
|
|
|
|
},
|
2022-06-01 13:11:25 +00:00
|
|
|
{
|
|
|
|
name: 'Notifications',
|
|
|
|
href: `/notifications`,
|
|
|
|
icon: NotificationsIcon,
|
|
|
|
},
|
2022-05-18 19:45:08 +00:00
|
|
|
]
|
|
|
|
}
|
|
|
|
|
|
|
|
const signedOutNavigation = [
|
|
|
|
{ name: 'Home', href: '/', icon: HomeIcon },
|
|
|
|
{ name: 'Explore', href: '/markets', icon: SearchIcon },
|
|
|
|
]
|
2022-03-31 03:51:15 +00:00
|
|
|
|
|
|
|
// From https://codepen.io/chris__sev/pen/QWGvYbL
|
2022-03-31 05:35:20 +00:00
|
|
|
export function BottomNavBar() {
|
|
|
|
const [sidebarOpen, setSidebarOpen] = useState(false)
|
2022-04-04 21:49:14 +00:00
|
|
|
|
2022-05-18 19:45:08 +00:00
|
|
|
const router = useRouter()
|
|
|
|
const currentPage = router.pathname
|
|
|
|
|
2022-04-04 21:49:14 +00:00
|
|
|
const user = useUser()
|
|
|
|
|
2022-05-28 04:27:37 +00:00
|
|
|
const isIframe = useIsIframe()
|
|
|
|
if (isIframe) {
|
|
|
|
return null
|
|
|
|
}
|
|
|
|
|
2022-05-18 19:45:08 +00:00
|
|
|
const navigationOptions =
|
|
|
|
user === null
|
|
|
|
? signedOutNavigation
|
|
|
|
: getNavigation(user?.username || 'error')
|
|
|
|
|
2022-02-01 01:02:17 +00:00
|
|
|
return (
|
2022-03-31 05:35:20 +00:00
|
|
|
<nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 lg:hidden">
|
2022-05-18 19:45:08 +00:00
|
|
|
{navigationOptions.map((item) => (
|
|
|
|
<NavBarItem key={item.name} item={item} currentPage={currentPage} />
|
|
|
|
))}
|
2022-04-04 21:49:14 +00:00
|
|
|
<div
|
2022-04-10 05:26:19 +00:00
|
|
|
className="w-full select-none py-1 px-3 text-center hover:cursor-pointer hover:bg-indigo-200 hover:text-indigo-700"
|
2022-03-31 05:35:20 +00:00
|
|
|
onClick={() => setSidebarOpen(true)}
|
|
|
|
>
|
2022-04-04 21:49:14 +00:00
|
|
|
{user === null ? (
|
|
|
|
<>
|
|
|
|
<MenuAlt3Icon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
|
|
|
|
More
|
|
|
|
</>
|
|
|
|
) : user ? (
|
|
|
|
<>
|
|
|
|
<Avatar
|
2022-05-09 21:32:59 +00:00
|
|
|
className="mx-auto my-1"
|
2022-04-04 21:49:14 +00:00
|
|
|
size="xs"
|
|
|
|
username={user.username}
|
|
|
|
avatarUrl={user.avatarUrl}
|
|
|
|
noLink
|
|
|
|
/>
|
|
|
|
{formatMoney(user.balance)}
|
|
|
|
</>
|
|
|
|
) : (
|
|
|
|
<></>
|
|
|
|
)}
|
|
|
|
</div>
|
2022-03-31 05:35:20 +00:00
|
|
|
|
|
|
|
<MobileSidebar
|
|
|
|
sidebarOpen={sidebarOpen}
|
|
|
|
setSidebarOpen={setSidebarOpen}
|
|
|
|
/>
|
2021-12-20 03:12:12 +00:00
|
|
|
</nav>
|
|
|
|
)
|
|
|
|
}
|
2022-03-31 03:51:15 +00:00
|
|
|
|
2022-05-18 19:45:08 +00:00
|
|
|
function NavBarItem(props: { item: Item; currentPage: string }) {
|
|
|
|
const { item, currentPage } = props
|
|
|
|
|
|
|
|
return (
|
|
|
|
<Link href={item.href}>
|
|
|
|
<a
|
|
|
|
className={clsx(
|
|
|
|
'block w-full py-1 px-3 text-center hover:bg-indigo-200 hover:text-indigo-700',
|
2022-05-23 21:49:30 +00:00
|
|
|
currentPage === item.href && 'bg-gray-200 text-indigo-700'
|
2022-05-18 19:45:08 +00:00
|
|
|
)}
|
2022-06-15 21:34:34 +00:00
|
|
|
onClick={trackCallback('navbar: ' + item.name)}
|
2022-05-18 19:45:08 +00:00
|
|
|
>
|
|
|
|
<item.icon className="my-1 mx-auto h-6 w-6" />
|
|
|
|
{item.name}
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-03-31 05:35:20 +00:00
|
|
|
// Sidebar that slides out on mobile
|
|
|
|
export function MobileSidebar(props: {
|
|
|
|
sidebarOpen: boolean
|
|
|
|
setSidebarOpen: (open: boolean) => void
|
2022-03-31 03:51:15 +00:00
|
|
|
}) {
|
2022-03-31 05:35:20 +00:00
|
|
|
const { sidebarOpen, setSidebarOpen } = props
|
2022-03-31 03:51:15 +00:00
|
|
|
return (
|
2022-03-31 05:35:20 +00:00
|
|
|
<div>
|
|
|
|
<Transition.Root show={sidebarOpen} as={Fragment}>
|
|
|
|
<Dialog
|
|
|
|
as="div"
|
|
|
|
className="fixed inset-0 z-40 flex"
|
|
|
|
onClose={setSidebarOpen}
|
2022-03-31 03:51:15 +00:00
|
|
|
>
|
2022-03-31 05:35:20 +00:00
|
|
|
<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"
|
2022-03-31 03:51:15 +00:00
|
|
|
>
|
2022-03-31 05:35:20 +00:00
|
|
|
<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">
|
2022-05-13 23:47:50 +00:00
|
|
|
<Sidebar className="pl-2" />
|
2022-03-31 05:35:20 +00:00
|
|
|
</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>
|
2022-03-31 03:51:15 +00:00
|
|
|
)
|
|
|
|
}
|