import {
HomeIcon,
UserGroupIcon,
CakeIcon,
SearchIcon,
ChatIcon,
BookOpenIcon,
DotsHorizontalIcon,
CashIcon,
HeartIcon,
PresentationChartLineIcon,
} from '@heroicons/react/outline'
import clsx from 'clsx'
import _ from 'lodash'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { useFollowedFolds } from 'web/hooks/use-fold'
import { useUser } from 'web/hooks/use-user'
import { firebaseLogin, firebaseLogout } from 'web/lib/firebase/users'
import { ManifoldLogo } from './manifold-logo'
import { MenuButton } from './menu'
import { getNavigationOptions, ProfileSummary } from './profile-menu'
import { useHasCreatedContractToday } from 'web/hooks/use-has-created-contract-today'
// Create an icon from the url of an image
function IconFromUrl(url: string): React.ComponentType<{ className?: string }> {
return function Icon(props) {
return
}
}
const navigation = [
{ name: 'Home', href: '/home', icon: HomeIcon },
{ name: 'Explore', href: '/markets', icon: SearchIcon },
{ name: 'Portfolio', href: '/portfolio', icon: PresentationChartLineIcon },
{ name: 'Charity', href: '/charity', icon: HeartIcon },
]
const signedOutNavigation = [
{ name: 'Home', href: '/home', icon: HomeIcon },
{ name: 'Explore', href: '/markets', icon: SearchIcon },
{ name: 'Charity', href: '/charity', icon: HeartIcon },
{ name: 'About', href: 'https://docs.manifold.markets', icon: BookOpenIcon },
]
const signedOutMobileNavigation = [
{ name: 'Charity', href: '/charity', icon: HeartIcon },
{ name: 'Leaderboards', href: '/leaderboards', icon: CakeIcon },
{
name: 'Discord',
href: 'https://discord.gg/eHQBNBqXuh',
icon: IconFromUrl('/discord-logo.svg'),
},
{
name: 'Twitter',
href: 'https://twitter.com/ManifoldMarkets',
icon: IconFromUrl('/twitter-logo.svg'),
},
{ name: 'About', href: 'https://docs.manifold.markets', icon: BookOpenIcon },
]
const mobileNavigation = [
{ name: 'Add funds', href: '/add-funds', icon: CashIcon },
...signedOutMobileNavigation,
]
type Item = {
name: string
href: string
icon: React.ComponentType<{ className?: string }>
}
function SidebarItem(props: { item: Item; currentPage: string }) {
const { item, currentPage } = props
return (
{item.name}
)
}
function MoreButton() {
return (
More
)
}
export default function Sidebar() {
const router = useRouter()
const currentPage = router.pathname
const user = useUser()
let folds = useFollowedFolds(user) || []
folds = _.sortBy(folds, 'followCount').reverse()
const deservesDailyFreeMarket = !useHasCreatedContractToday(user)
const navigationOptions = user === null ? signedOutNavigation : navigation
const mobileNavigationOptions =
user === null ? signedOutMobileNavigation : mobileNavigation
return (
)
}