2022-03-31 05:35:20 +00:00
|
|
|
import {
|
|
|
|
HomeIcon,
|
2022-04-04 04:20:41 +00:00
|
|
|
CakeIcon,
|
2022-03-31 05:35:20 +00:00
|
|
|
SearchIcon,
|
|
|
|
BookOpenIcon,
|
|
|
|
DotsHorizontalIcon,
|
2022-04-04 04:20:41 +00:00
|
|
|
CashIcon,
|
2022-04-29 23:35:56 +00:00
|
|
|
HeartIcon,
|
|
|
|
PresentationChartLineIcon,
|
2022-05-17 17:56:10 +00:00
|
|
|
ChatAltIcon,
|
2022-03-31 05:35:20 +00:00
|
|
|
} from '@heroicons/react/outline'
|
|
|
|
import clsx from 'clsx'
|
|
|
|
import _ from 'lodash'
|
|
|
|
import Link from 'next/link'
|
|
|
|
import { useRouter } from 'next/router'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { useFollowedFolds } from 'web/hooks/use-fold'
|
|
|
|
import { useUser } from 'web/hooks/use-user'
|
|
|
|
import { firebaseLogin, firebaseLogout } from 'web/lib/firebase/users'
|
2022-03-31 05:35:20 +00:00
|
|
|
import { ManifoldLogo } from './manifold-logo'
|
|
|
|
import { MenuButton } from './menu'
|
|
|
|
import { getNavigationOptions, ProfileSummary } from './profile-menu'
|
2022-05-09 13:04:36 +00:00
|
|
|
import { useHasCreatedContractToday } from 'web/hooks/use-has-created-contract-today'
|
2022-03-31 05:35:20 +00:00
|
|
|
|
2022-05-06 02:20:18 +00:00
|
|
|
// Create an icon from the url of an image
|
|
|
|
function IconFromUrl(url: string): React.ComponentType<{ className?: string }> {
|
|
|
|
return function Icon(props) {
|
|
|
|
return <img src={url} className={clsx(props.className, 'h-6 w-6')} />
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-05-18 14:59:08 +00:00
|
|
|
const navigation = [
|
|
|
|
{ name: 'Home', href: '/home', icon: HomeIcon },
|
|
|
|
{ name: 'Activity', href: '/activity', icon: ChatAltIcon },
|
|
|
|
{ name: 'Portfolio', href: '/portfolio', icon: PresentationChartLineIcon },
|
|
|
|
{ name: 'Charity', href: '/charity', icon: HeartIcon },
|
|
|
|
]
|
2022-04-03 20:48:25 +00:00
|
|
|
|
|
|
|
const signedOutNavigation = [
|
2022-03-31 05:35:20 +00:00
|
|
|
{ name: 'Home', href: '/home', icon: HomeIcon },
|
2022-04-04 04:20:41 +00:00
|
|
|
{ name: 'Explore', href: '/markets', icon: SearchIcon },
|
2022-05-05 14:15:12 +00:00
|
|
|
{ name: 'Charity', href: '/charity', icon: HeartIcon },
|
2022-03-31 05:35:20 +00:00
|
|
|
{ name: 'About', href: 'https://docs.manifold.markets', icon: BookOpenIcon },
|
|
|
|
]
|
|
|
|
|
2022-04-04 04:20:41 +00:00
|
|
|
const signedOutMobileNavigation = [
|
2022-04-29 23:35:56 +00:00
|
|
|
{ name: 'Charity', href: '/charity', icon: HeartIcon },
|
2022-04-04 04:20:41 +00:00
|
|
|
{ name: 'Leaderboards', href: '/leaderboards', icon: CakeIcon },
|
2022-05-09 13:04:36 +00:00
|
|
|
{
|
|
|
|
name: 'Discord',
|
|
|
|
href: 'https://discord.gg/eHQBNBqXuh',
|
|
|
|
icon: IconFromUrl('/discord-logo.svg'),
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'Twitter',
|
|
|
|
href: 'https://twitter.com/ManifoldMarkets',
|
|
|
|
icon: IconFromUrl('/twitter-logo.svg'),
|
|
|
|
},
|
2022-04-04 04:20:41 +00:00
|
|
|
{ name: 'About', href: 'https://docs.manifold.markets', icon: BookOpenIcon },
|
|
|
|
]
|
|
|
|
|
|
|
|
const mobileNavigation = [
|
|
|
|
{ name: 'Add funds', href: '/add-funds', icon: CashIcon },
|
|
|
|
...signedOutMobileNavigation,
|
|
|
|
]
|
|
|
|
|
2022-03-31 05:35:20 +00:00
|
|
|
type Item = {
|
|
|
|
name: string
|
|
|
|
href: string
|
|
|
|
icon: React.ComponentType<{ className?: string }>
|
|
|
|
}
|
|
|
|
|
|
|
|
function SidebarItem(props: { item: Item; currentPage: string }) {
|
|
|
|
const { item, currentPage } = props
|
|
|
|
return (
|
|
|
|
<Link href={item.href} key={item.name}>
|
|
|
|
<a
|
|
|
|
className={clsx(
|
|
|
|
item.href == currentPage
|
|
|
|
? 'bg-gray-200 text-gray-900'
|
|
|
|
: 'text-gray-600 hover:bg-gray-100',
|
|
|
|
'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
|
|
|
|
)}
|
|
|
|
aria-current={item.href == currentPage ? 'page' : undefined}
|
|
|
|
>
|
|
|
|
<item.icon
|
|
|
|
className={clsx(
|
|
|
|
item.href == currentPage
|
|
|
|
? 'text-gray-500'
|
|
|
|
: 'text-gray-400 group-hover:text-gray-500',
|
|
|
|
'-ml-1 mr-3 h-6 w-6 flex-shrink-0'
|
|
|
|
)}
|
|
|
|
aria-hidden="true"
|
|
|
|
/>
|
|
|
|
<span className="truncate">{item.name}</span>
|
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
function MoreButton() {
|
|
|
|
return (
|
|
|
|
<a className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:cursor-pointer hover:bg-gray-100">
|
|
|
|
<DotsHorizontalIcon
|
|
|
|
className="-ml-1 mr-3 h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
|
|
|
|
aria-hidden="true"
|
|
|
|
/>
|
|
|
|
<span className="truncate">More</span>
|
|
|
|
</a>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2022-05-13 23:47:50 +00:00
|
|
|
export default function Sidebar(props: { className?: string }) {
|
|
|
|
const { className } = props
|
2022-03-31 05:35:20 +00:00
|
|
|
const router = useRouter()
|
|
|
|
const currentPage = router.pathname
|
|
|
|
|
|
|
|
const user = useUser()
|
|
|
|
let folds = useFollowedFolds(user) || []
|
|
|
|
folds = _.sortBy(folds, 'followCount').reverse()
|
2022-04-28 23:01:50 +00:00
|
|
|
const deservesDailyFreeMarket = !useHasCreatedContractToday(user)
|
2022-03-31 05:35:20 +00:00
|
|
|
|
2022-05-18 14:59:08 +00:00
|
|
|
const navigationOptions = user === null ? signedOutNavigation : navigation
|
2022-04-04 04:20:41 +00:00
|
|
|
const mobileNavigationOptions =
|
|
|
|
user === null ? signedOutMobileNavigation : mobileNavigation
|
2022-04-03 20:48:25 +00:00
|
|
|
|
2022-03-31 05:35:20 +00:00
|
|
|
return (
|
2022-05-13 23:47:50 +00:00
|
|
|
<nav aria-label="Sidebar" className={className}>
|
2022-05-14 01:07:44 +00:00
|
|
|
<ManifoldLogo className="pb-6" twoLine />
|
2022-04-04 04:37:14 +00:00
|
|
|
<div className="mb-2" style={{ minHeight: 80 }}>
|
2022-03-31 05:35:20 +00:00
|
|
|
{user ? (
|
2022-05-14 01:07:44 +00:00
|
|
|
<ProfileSummary user={user} />
|
2022-03-31 05:35:20 +00:00
|
|
|
) : user === null ? (
|
|
|
|
<div className="py-6 text-center">
|
|
|
|
<button
|
2022-05-14 01:07:44 +00:00
|
|
|
className="btn btn-sm border-2 bg-white px-6 font-medium normal-case text-gray-700"
|
2022-03-31 05:35:20 +00:00
|
|
|
onClick={firebaseLogin}
|
|
|
|
>
|
|
|
|
Sign in
|
|
|
|
</button>
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div />
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
|
2022-04-04 04:20:41 +00:00
|
|
|
<div className="space-y-1 lg:hidden">
|
|
|
|
{mobileNavigationOptions.map((item) => (
|
|
|
|
<SidebarItem key={item.name} item={item} currentPage={currentPage} />
|
|
|
|
))}
|
|
|
|
|
|
|
|
{user && (
|
|
|
|
<MenuButton
|
|
|
|
menuItems={[
|
|
|
|
{ name: 'Sign out', href: '#', onClick: () => firebaseLogout() },
|
|
|
|
]}
|
|
|
|
buttonContent={<MoreButton />}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div className="hidden space-y-1 lg:block">
|
2022-04-03 20:48:25 +00:00
|
|
|
{navigationOptions.map((item) => (
|
2022-03-31 08:38:57 +00:00
|
|
|
<SidebarItem key={item.name} item={item} currentPage={currentPage} />
|
2022-03-31 05:35:20 +00:00
|
|
|
))}
|
|
|
|
|
|
|
|
<MenuButton
|
|
|
|
menuItems={getNavigationOptions(user)}
|
|
|
|
buttonContent={<MoreButton />}
|
|
|
|
/>
|
|
|
|
</div>
|
2022-04-19 14:15:05 +00:00
|
|
|
|
2022-05-18 15:25:56 +00:00
|
|
|
{user && deservesDailyFreeMarket ? (
|
2022-05-17 15:32:20 +00:00
|
|
|
<div className=" mt-4 text-center text-indigo-500">
|
2022-04-28 23:01:50 +00:00
|
|
|
Use your daily free market! 🎉
|
|
|
|
</div>
|
|
|
|
) : (
|
|
|
|
<div />
|
|
|
|
)}
|
|
|
|
|
2022-04-19 14:15:05 +00:00
|
|
|
{user && (
|
2022-04-28 23:01:50 +00:00
|
|
|
<div className={'aligncenter flex justify-center'}>
|
2022-05-18 14:20:39 +00:00
|
|
|
<Link href={'/create'} passHref>
|
|
|
|
<button className="btn btn-md mt-4 border-0 bg-indigo-500 capitalize hover:bg-indigo-700">
|
2022-05-17 15:32:20 +00:00
|
|
|
Ask question
|
2022-04-28 23:01:50 +00:00
|
|
|
</button>
|
|
|
|
</Link>
|
|
|
|
</div>
|
2022-04-19 14:15:05 +00:00
|
|
|
)}
|
2022-03-31 05:35:20 +00:00
|
|
|
</nav>
|
|
|
|
)
|
|
|
|
}
|