diff --git a/web/components/nav/more-button.tsx b/web/components/nav/more-button.tsx new file mode 100644 index 00000000..5e6653f3 --- /dev/null +++ b/web/components/nav/more-button.tsx @@ -0,0 +1,23 @@ +import { DotsHorizontalIcon } from '@heroicons/react/outline' + +export function MoreButton() { + return +} + +function SidebarButton(props: { + text: string + icon: React.ComponentType<{ className?: string }> + children?: React.ReactNode +}) { + const { text, children } = props + return ( + + + ) +} diff --git a/web/components/nav/sidebar-item.tsx b/web/components/nav/sidebar-item.tsx new file mode 100644 index 00000000..0023511f --- /dev/null +++ b/web/components/nav/sidebar-item.tsx @@ -0,0 +1,63 @@ +import React from 'react' +import clsx from 'clsx' +import Link from 'next/link' + +import { trackCallback } from 'web/lib/service/analytics' + +export type Item = { + name: string + trackingEventName?: string + href?: string + key?: string + icon?: React.ComponentType<{ className?: string }> +} + +export function SidebarItem(props: { + item: Item + currentPage: string + onClick?: (key: string) => void +}) { + const { item, currentPage, onClick } = props + const isCurrentPage = + item.href != null ? item.href === currentPage : item.key === currentPage + + const sidebarItem = ( + + {item.icon && ( + + ) + + if (item.href) { + return ( + + {sidebarItem} + + ) + } else { + return onClick ? ( + + ) : ( + <> + ) + } +} diff --git a/web/components/nav/sidebar.tsx b/web/components/nav/sidebar.tsx index ae03655b..618bbe94 100644 --- a/web/components/nav/sidebar.tsx +++ b/web/components/nav/sidebar.tsx @@ -1,29 +1,93 @@ +import React from 'react' import { HomeIcon, SearchIcon, BookOpenIcon, - DotsHorizontalIcon, CashIcon, HeartIcon, ChatIcon, + ChartBarIcon, } from '@heroicons/react/outline' import clsx from 'clsx' -import Link from 'next/link' import Router, { 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, MenuItem } 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 { trackCallback, withTracking } from 'web/lib/service/analytics' +import { withTracking } from 'web/lib/service/analytics' import { CHALLENGES_ENABLED } from 'common/challenge' import { buildArray } from 'common/util/array' import TrophyIcon from 'web/lib/icons/trophy-icon' import { SignInButton } from '../sign-in-button' +import { SidebarItem } from './sidebar-item' +import { MoreButton } from './more-button' + +export default function Sidebar(props: { className?: string }) { + const { className } = props + const router = useRouter() + const currentPage = router.pathname + + const user = useUser() + + const desktopNavOptions = !user + ? signedOutDesktopNavigation + : getDesktopNavigation() + + const mobileNavOptions = !user + ? signedOutMobileNavigation + : signedInMobileNavigation + + const createMarketButton = user && !user.isBannedFromPosting && ( + + ) + + return ( + + ) +} const logout = async () => { // log out, and then reload the page, in case SSR wants to boot them out @@ -32,7 +96,7 @@ const logout = async () => { await Router.replace(Router.asPath) } -function getNavigation() { +function getDesktopNavigation() { return [ { name: 'Home', href: '/home', icon: HomeIcon }, { name: 'Search', href: '/search', icon: SearchIcon }, @@ -51,10 +115,10 @@ function getNavigation() { ] } -function getMoreNavigation(user?: User | null) { +function getMoreDesktopNavigation(user?: User | null) { if (IS_PRIVATE_MANIFOLD) { return [ - { name: 'Leaderboards', href: '/leaderboards' }, + { name: 'Leaderboards', href: '/leaderboards', icon: ChartBarIcon }, { name: 'Sign out', href: '#', @@ -81,7 +145,6 @@ function getMoreNavigation(user?: User | null) { // Signed in "More" return buildArray( - { name: 'Leaderboards', href: '/leaderboards' }, { name: 'Groups', href: '/groups' }, CHALLENGES_ENABLED && { name: 'Challenges', href: '/challenges' }, [ @@ -99,7 +162,7 @@ function getMoreNavigation(user?: User | null) { ) } -const signedOutNavigation = [ +const signedOutDesktopNavigation = [ { name: 'Home', href: '/', icon: HomeIcon }, { name: 'Explore', href: '/search', icon: SearchIcon }, { @@ -117,11 +180,14 @@ const signedOutMobileNavigation = [ }, { name: 'Charity', href: '/charity', icon: HeartIcon }, { name: 'Tournaments', href: '/tournaments', icon: TrophyIcon }, + { name: 'Leaderboards', href: '/leaderboards', icon: ChartBarIcon }, { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh', icon: ChatIcon }, ] const signedInMobileNavigation = [ + { name: 'Search', href: '/search', icon: SearchIcon }, { name: 'Tournaments', href: '/tournaments', icon: TrophyIcon }, + { name: 'Leaderboards', href: '/leaderboards', icon: ChartBarIcon }, ...(IS_PRIVATE_MANIFOLD ? [] : [{ name: 'Get M$', href: '/add-funds', icon: CashIcon }]), @@ -145,7 +211,6 @@ function getMoreMobileNav() { [ { name: 'Groups', href: '/groups' }, { name: 'Referrals', href: '/referrals' }, - { name: 'Leaderboards', href: '/leaderboards' }, { name: 'Charity', href: '/charity' }, { name: 'Send M$', href: '/links' }, { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' }, @@ -153,136 +218,3 @@ function getMoreMobileNav() { signOut ) } - -export type Item = { - name: string - trackingEventName?: string - href?: string - key?: string - icon?: React.ComponentType<{ className?: string }> -} - -export function SidebarItem(props: { - item: Item - currentPage: string - onClick?: (key: string) => void -}) { - const { item, currentPage, onClick } = props - const isCurrentPage = - item.href != null ? item.href === currentPage : item.key === currentPage - - const sidebarItem = ( - - {item.icon && ( - - ) - - if (item.href) { - return ( - - {sidebarItem} - - ) - } else { - return onClick ? ( - - ) : ( - <> - ) - } -} - -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 - - return ( - - ) -}