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 (
+
+
+ {text}
+ {children}
+
+ )
+}
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 && (
+
+ )}
+ {item.name}
+
+ )
+
+ 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 && (
-
- )}
- {item.name}
-
- )
-
- 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 (
-
-
- {text}
- {children}
-
- )
-}
-
-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 (
-
- )
-}