open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Rework nav to show list of groups (#596)

Browse Source 
* Rework nav to show list of groups

* Fix lint

* Replace Portfolio with Profile link

* Lint: remove unused vars
This commit is contained in:
Austin Chen 2022-06-29 12:33:20 -05:00 committed by GitHub
parent 8c3c30c707
commit 2d79d7f8db
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 90 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
web/components/nav/nav-bar.tsx
View File

@ -3,7 +3,6 @@ import Link from 'next/link'
import { import {
HomeIcon, HomeIcon,
MenuAlt3Icon, MenuAlt3Icon,
PresentationChartLineIcon,
SearchIcon, SearchIcon,
XIcon, XIcon,
} from '@heroicons/react/outline' } from '@heroicons/react/outline'
@ -19,14 +18,9 @@ import NotificationsIcon from 'web/components/notifications-icon'
import { useIsIframe } from 'web/hooks/use-is-iframe' import { useIsIframe } from 'web/hooks/use-is-iframe'
import { trackCallback } from 'web/lib/service/analytics' import { trackCallback } from 'web/lib/service/analytics'
function getNavigation(username: string) { function getNavigation() {
return [ return [
{ name: 'Home', href: '/home', icon: HomeIcon }, { name: 'Home', href: '/home', icon: HomeIcon },
{
name: 'Portfolio',
href: `/${username}?tab=bets`,
icon: PresentationChartLineIcon,
},
{ {
name: 'Notifications', name: 'Notifications',
href: `/notifications`, href: `/notifications`,
@ -55,38 +49,39 @@ export function BottomNavBar() {
} }
const navigationOptions = const navigationOptions =
user === null user === null ? signedOutNavigation : getNavigation()
? signedOutNavigation
: getNavigation(user?.username || 'error')
return ( return (
<nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 lg:hidden"> <nav className="fixed inset-x-0 bottom-0 z-20 flex justify-between border-t-2 bg-white text-xs text-gray-700 lg:hidden">
{navigationOptions.map((item) => ( {navigationOptions.map((item) => (
<NavBarItem key={item.name} item={item} currentPage={currentPage} /> <NavBarItem key={item.name} item={item} currentPage={currentPage} />
))} ))}
{user && (
<NavBarItem
key={'profile'}
currentPage={currentPage}
item={{
name: formatMoney(user.balance),
href: `/${user.username}?tab=bets`,
icon: () => (
<Avatar
className="mx-auto my-1"
size="xs"
username={user.username}
avatarUrl={user.avatarUrl}
noLink
/>
),
}}
/>
)}
<div <div
className="w-full select-none py-1 px-3 text-center hover:cursor-pointer hover:bg-indigo-200 hover:text-indigo-700" className="w-full select-none py-1 px-3 text-center hover:cursor-pointer hover:bg-indigo-200 hover:text-indigo-700"
onClick={() => setSidebarOpen(true)} onClick={() => setSidebarOpen(true)}
> >
{user === null ? ( <MenuAlt3Icon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
<> More
<MenuAlt3Icon className="my-1 mx-auto h-6 w-6" aria-hidden="true" />
More
</>
) : user ? (
<>
<Avatar
className="mx-auto my-1"
size="xs"
username={user.username}
avatarUrl={user.avatarUrl}
noLink
/>
{formatMoney(user.balance)}
</>
) : (
<></>
)}
</div> </div>
<MobileSidebar <MobileSidebar
@ -109,7 +104,7 @@ function NavBarItem(props: { item: Item; currentPage: string }) {
)} )}
onClick={trackCallback('navbar: ' + item.name)} onClick={trackCallback('navbar: ' + item.name)}
> >
<item.icon className="my-1 mx-auto h-6 w-6" /> {item.icon && <item.icon className="my-1 mx-auto h-6 w-6" />}
{item.name} {item.name}
</a> </a>
</Link> </Link>

133
web/components/nav/sidebar.tsx
View File

@ -6,8 +6,8 @@ import {
CashIcon, CashIcon,
HeartIcon, HeartIcon,
UserGroupIcon, UserGroupIcon,
ChevronDownIcon,
TrendingUpIcon, TrendingUpIcon,
ChatIcon,
} from '@heroicons/react/outline' } from '@heroicons/react/outline'
import clsx from 'clsx' import clsx from 'clsx'
import Link from 'next/link' import Link from 'next/link'
@ -25,6 +25,7 @@ import { useMemberGroups } from 'web/hooks/use-group'
import { groupPath } from 'web/lib/firebase/groups' import { groupPath } from 'web/lib/firebase/groups'
import { trackCallback, withTracking } from 'web/lib/service/analytics' import { trackCallback, withTracking } from 'web/lib/service/analytics'
import { Group } from 'common/group' import { Group } from 'common/group'
import { Spacer } from '../layout/spacer'
function getNavigation() { function getNavigation() {
return [ return [
@ -82,8 +83,20 @@ const signedOutNavigation = [
] ]
const signedOutMobileNavigation = [ const signedOutMobileNavigation = [
{
name: 'About',
href: 'https://docs.manifold.markets/$how-to',
icon: BookOpenIcon,
},
{ name: 'Charity', href: '/charity', icon: HeartIcon }, { name: 'Charity', href: '/charity', icon: HeartIcon },
{ name: 'Leaderboards', href: '/leaderboards', icon: TrendingUpIcon }, { 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', name: 'About',
href: 'https://docs.manifold.markets/$how-to', href: 'https://docs.manifold.markets/$how-to',
@ -91,17 +104,12 @@ const signedOutMobileNavigation = [
}, },
] ]
const signedInMobileNavigation = [
...(IS_PRIVATE_MANIFOLD
? []
: [{ name: 'Get M$', href: '/add-funds', icon: CashIcon }]),
...signedOutMobileNavigation,
]
function getMoreMobileNav() { function getMoreMobileNav() {
return [ return [
{ name: 'Send M$', href: '/links' },
{ name: 'Charity', href: '/charity' },
{ name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' }, { name: 'Discord', href: 'https://discord.gg/eHQBNBqXuh' },
{ name: 'Statistics', href: '/stats' }, { name: 'Leaderboards', href: '/leaderboards' },
{ {
name: 'Sign out', name: 'Sign out',
href: '#', href: '#',
@ -113,7 +121,7 @@ function getMoreMobileNav() {
export type Item = { export type Item = {
name: string name: string
href: string href: string
icon: React.ComponentType<{ className?: string }> icon?: React.ComponentType<{ className?: string }>
} }
function SidebarItem(props: { item: Item; currentPage: string }) { function SidebarItem(props: { item: Item; currentPage: string }) {
@ -130,15 +138,17 @@ function SidebarItem(props: { item: Item; currentPage: string }) {
)} )}
aria-current={item.href == currentPage ? 'page' : undefined} aria-current={item.href == currentPage ? 'page' : undefined}
> >
<item.icon {item.icon && (
className={clsx( <item.icon
item.href == currentPage className={clsx(
? 'text-gray-500' item.href == currentPage
: 'text-gray-400 group-hover:text-gray-500', ? 'text-gray-500'
'-ml-1 mr-3 h-6 w-6 flex-shrink-0' : 'text-gray-400 group-hover:text-gray-500',
)} '-ml-1 mr-3 h-6 w-6 flex-shrink-0'
aria-hidden="true" )}
/> aria-hidden="true"
/>
)}
<span className="truncate">{item.name}</span> <span className="truncate">{item.name}</span>
</a> </a>
</Link> </Link>
@ -167,14 +177,6 @@ function MoreButton() {
return <SidebarButton text={'More'} icon={DotsHorizontalIcon} /> return <SidebarButton text={'More'} icon={DotsHorizontalIcon} />
} }
function GroupsButton() {
return (
<SidebarButton icon={UserGroupIcon} text={'Groups'}>
<ChevronDownIcon className=" mt-0.5 ml-2 h-5 w-5" aria-hidden="true" />
</SidebarButton>
)
}
export default function Sidebar(props: { className?: string }) { export default function Sidebar(props: { className?: string }) {
const { className } = props const { className } = props
const router = useRouter() const router = useRouter()
@ -193,31 +195,20 @@ export default function Sidebar(props: { className?: string }) {
return ( return (
<nav aria-label="Sidebar" className={className}> <nav aria-label="Sidebar" className={className}>
<ManifoldLogo className="pb-6" twoLine /> <ManifoldLogo className="pb-6" twoLine />
<CreateQuestionButton user={user} />
<Spacer h={4} />
{user && ( {user && (
<div className="mb-2" style={{ minHeight: 80 }}> <div className="w-full" style={{ minHeight: 80 }}>
<ProfileSummary user={user} /> <ProfileSummary user={user} />
</div> </div>
)} )}
{/* Mobile navigation */} {/* Mobile navigation */}
<div className="space-y-1 lg:hidden"> <div className="space-y-1 lg:hidden">
{user && (
<MenuButton
buttonContent={<GroupsButton />}
menuItems={[{ name: 'Explore', href: '/groups' }, ...memberItems]}
className={'relative z-50 flex-shrink-0'}
/>
)}
{mobileNavigationOptions.map((item) => ( {mobileNavigationOptions.map((item) => (
<SidebarItem key={item.href} item={item} currentPage={currentPage} /> <SidebarItem key={item.href} item={item} currentPage={currentPage} />
))} ))}
{!user && (
<SidebarItem
key={'Groups'}
item={{ name: 'Groups', href: '/groups', icon: UserGroupIcon }}
currentPage={currentPage}
/>
)}
{user && ( {user && (
<MenuButton <MenuButton
@ -225,41 +216,47 @@ export default function Sidebar(props: { className?: string }) {
buttonContent={<MoreButton />} buttonContent={<MoreButton />}
/> />
)} )}
<GroupsList currentPage={currentPage} memberItems={memberItems} />
</div> </div>
{/* Desktop navigation */} {/* Desktop navigation */}
<div className="hidden space-y-1 lg:block"> <div className="hidden space-y-1 lg:block">
{navigationOptions.map((item) => {navigationOptions.map((item) => (
item.name === 'Notifications' ? ( <SidebarItem key={item.href} item={item} currentPage={currentPage} />
<div key={item.href}> ))}
<SidebarItem item={item} currentPage={currentPage} />
{user && (
<MenuButton
key={'groupsdropdown'}
buttonContent={<GroupsButton />}
menuItems={[
{ name: 'Explore', href: '/groups' },
...memberItems,
]}
className={'relative z-50 flex-shrink-0'}
/>
)}
</div>
) : (
<SidebarItem
key={item.href}
item={item}
currentPage={currentPage}
/>
)
)}
<MenuButton <MenuButton
menuItems={getMoreNavigation(user)} menuItems={getMoreNavigation(user)}
buttonContent={<MoreButton />} buttonContent={<MoreButton />}
/> />
<Spacer h={6} />
<GroupsList currentPage={currentPage} memberItems={memberItems} />
</div> </div>
<CreateQuestionButton user={user} />
</nav> </nav>
) )
} }
function GroupsList(props: { currentPage: string; memberItems: Item[] }) {
const { currentPage, memberItems } = props
return (
<>
<SidebarItem
item={{ name: 'Groups', href: '/groups', icon: UserGroupIcon }}
currentPage={currentPage}
/>
<div className="mt-1 space-y-0.5">
{memberItems.map((item) => (
<a
key={item.name}
href={item.href}
className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900"
>
<span className="truncate">&nbsp; {item.name}</span>
</a>
))}
</div>
</>
)
}