import clsx from 'clsx' import Link from 'next/link' import { useUser } from '../../hooks/use-user' import { Row } from '../layout/row' import { firebaseLogin, User } from '../../lib/firebase/users' import { ManifoldLogo } from './manifold-logo' import { ProfileMenu } from './profile-menu' import { CollectionIcon, HomeIcon, SearchIcon, UserGroupIcon, } from '@heroicons/react/outline' export function NavBar(props: { darkBackground?: boolean wide?: boolean assertUser?: 'signed-in' | 'signed-out' className?: string }) { const { darkBackground, wide, assertUser, className } = props const user = useUser() const hoverClasses = 'hover:underline hover:decoration-indigo-400 hover:decoration-2' const themeClasses = clsx(darkBackground && 'text-white', hoverClasses) return ( <> {user && } ) } // From https://codepen.io/chris__sev/pen/QWGvYbL function BottomNavBar(props: { user: User }) { const { user } = props return ( ) } function NavOptions(props: { user: User | null | undefined assertUser: 'signed-in' | 'signed-out' | undefined themeClasses: string }) { const { user, assertUser, themeClasses } = props const showSignedIn = assertUser === 'signed-in' || !!user const showSignedOut = !showSignedIn && (assertUser === 'signed-out' || user === null) return ( <> {showSignedOut && ( About )} Communities Markets {showSignedOut && ( <> )} {showSignedIn && } ) }