import { HomeIcon, SearchIcon, BookOpenIcon, DotsHorizontalIcon, CashIcon, HeartIcon, UserGroupIcon, TrendingUpIcon, ChatIcon, } from '@heroicons/react/outline' import clsx from 'clsx' import Link from 'next/link' import { useRouter } from 'next/router' import { useUser } from 'web/hooks/use-user' import { firebaseLogout, User } from 'web/lib/firebase/users' import { ManifoldLogo } from './manifold-logo' import { MenuButton } from './menu' import { ProfileSummary } from './profile-menu' import NotificationsIcon from 'web/components/notifications-icon' import React from 'react' import { IS_PRIVATE_MANIFOLD } from 'common/envs/constants' import { CreateQuestionButton } from 'web/components/create-question-button' import { useMemberGroups } from 'web/hooks/use-group' import { groupPath } from 'web/lib/firebase/groups' import { trackCallback, withTracking } from 'web/lib/service/analytics' import { Group } from 'common/group' import { Spacer } from '../layout/spacer' function getNavigation() { return [ { name: 'Home', href: '/home', icon: HomeIcon }, { name: 'Notifications', href: `/notifications`, icon: NotificationsIcon, }, ...(IS_PRIVATE_MANIFOLD ? [] : [{ name: 'Get M$', href: '/add-funds', icon: CashIcon }]), ] } function getMoreNavigation(user?: User | null) { if (IS_PRIVATE_MANIFOLD) { return [{ name: 'Leaderboards', href: '/leaderboards' }] } if (!user) { return [ { name: 'Leaderboards', href: '/leaderboards' }, { name: 'Charity', href: '/charity' }, { name: 'Blog', href: 'https://news.manifold.markets' }, { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' }, { name: 'Twitter', href: 'https://twitter.com/ManifoldMarkets' }, ] } return [ { name: 'Send M$', href: '/links' }, { name: 'Leaderboards', href: '/leaderboards' }, { name: 'Charity', href: '/charity' }, { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' }, { name: 'About', href: 'https://docs.manifold.markets/$how-to' }, { name: 'Sign out', href: '#', onClick: withTracking(firebaseLogout, 'sign out'), }, ] } 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/$how-to', icon: BookOpenIcon, }, ] const signedOutMobileNavigation = [ { name: 'About', href: 'https://docs.manifold.markets/$how-to', icon: BookOpenIcon, }, { name: 'Charity', href: '/charity', icon: HeartIcon }, { name: 'Leaderboards', href: '/leaderboards', icon: TrendingUpIcon }, { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh', icon: ChatIcon }, ] const signedInMobileNavigation = [ ...(IS_PRIVATE_MANIFOLD ? [] : [{ name: 'Get M$', href: '/add-funds', icon: CashIcon }]), { name: 'About', href: 'https://docs.manifold.markets/$how-to', icon: BookOpenIcon, }, ] function getMoreMobileNav() { return [ { name: 'Send M$', href: '/links' }, { name: 'Charity', href: '/charity' }, { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' }, { name: 'Leaderboards', href: '/leaderboards' }, { name: 'Sign out', href: '#', onClick: withTracking(firebaseLogout, 'sign out'), }, ] } export type Item = { name: string href: string icon?: React.ComponentType<{ className?: string }> } function SidebarItem(props: { item: Item; currentPage: string }) { const { item, currentPage } = props return ( {item.icon && ( ) } function SidebarButton(props: { text: string icon: React.ComponentType<{ className?: string }> children?: React.ReactNode }) { const { text, children } = props return ( ) } function MoreButton() { return } export default function Sidebar(props: { className?: string }) { const { className } = props const router = useRouter() const currentPage = router.pathname const user = useUser() const navigationOptions = !user ? signedOutNavigation : getNavigation() const mobileNavigationOptions = !user ? signedOutMobileNavigation : signedInMobileNavigation const memberItems = (useMemberGroups(user?.id) ?? []).map((group: Group) => ({ name: group.name, href: groupPath(group.slug), })) return ( ) } function GroupsList(props: { currentPage: string; memberItems: Item[] }) { const { currentPage, memberItems } = props return ( <>
{memberItems.map((item) => (   {item.name} ))}
) }