import Link from 'next/link' import { HomeIcon, MenuAlt3Icon, SearchIcon, XIcon, } from '@heroicons/react/outline' import { Transition, Dialog } from '@headlessui/react' import { useState, Fragment } from 'react' import Sidebar, { Item } from './sidebar' import { useUser } from 'web/hooks/use-user' import { formatMoney } from 'common/util/format' import { Avatar } from '../avatar' import clsx from 'clsx' import { useRouter } from 'next/router' import NotificationsIcon from 'web/components/notifications-icon' import { useIsIframe } from 'web/hooks/use-is-iframe' import { trackCallback } from 'web/lib/service/analytics' function getNavigation() { return [ { name: 'Home', href: '/home', icon: HomeIcon }, { name: 'Notifications', href: `/notifications`, icon: NotificationsIcon, }, ] } const signedOutNavigation = [ { name: 'Home', href: '/', icon: HomeIcon }, { name: 'Explore', href: '/markets', icon: SearchIcon }, ] // From https://codepen.io/chris__sev/pen/QWGvYbL export function BottomNavBar() { const [sidebarOpen, setSidebarOpen] = useState(false) const router = useRouter() const currentPage = router.pathname const user = useUser() const isIframe = useIsIframe() if (isIframe) { return null } const navigationOptions = user === null ? signedOutNavigation : getNavigation() return ( ) } function NavBarItem(props: { item: Item; currentPage: string }) { const { item, currentPage } = props const track = trackCallback(`navbar: ${item.trackingEventName ?? item.name}`) return ( {item.icon && } {item.name} ) } // Sidebar that slides out on mobile export function MobileSidebar(props: { sidebarOpen: boolean setSidebarOpen: (open: boolean) => void }) { const { sidebarOpen, setSidebarOpen } = props return (
) }