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

Extract out sidebaricon; link to /about

Browse Source
This commit is contained in:
Austin Chen 2022-03-29 09:35:33 -07:00
parent b9548b80f2
commit d326ae5c30
1 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,10 +1,8 @@
import {
HomeIcon,
FireIcon,
UserGroupIcon,
TrendingUpIcon,
SearchIcon,
CollectionIcon,
BookOpenIcon,
} from '@heroicons/react/outline'
import clsx from 'clsx'
import Link from 'next/link'
@ -13,11 +11,15 @@ import { useRouter } from 'next/router'
const navigation = [
{ name: 'Home', href: '/home', icon: HomeIcon },
{ name: 'Markets', href: '/markets', icon: SearchIcon },
{ name: 'Communities', href: '/folds', icon: UserGroupIcon },
{ name: 'Trades', href: '/trades', icon: CollectionIcon },
// { name: 'Trending', href: '#', icon: TrendingUpIcon, current: false },
{ name: 'About', href: 'https://docs.manifold.markets', icon: BookOpenIcon },
]
type Item = {
name: string
href: string
icon: React.ComponentType<{ className?: string }>
}
const communities = [
{ name: 'Movies', href: '#' },
{ name: 'Food', href: '#' },
@ -29,6 +31,36 @@ const communities = [
{ name: 'Gaming', href: '#' },
]
function SidebarItem(props: { item: Item; currentPage: string }) {
const { item, currentPage } = props
return (
<Link href={item.href} key={item.name}>
<a
key={item.name}
href={item.href}
className={clsx(
item.href == currentPage
? 'bg-gray-200 text-gray-900'
: 'text-gray-600 hover:bg-gray-50',
'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>
)
}
export default function Sidebar() {
const router = useRouter()
const currentPage = router.pathname
@ -37,47 +69,23 @@ export default function Sidebar() {
<nav aria-label="Sidebar" className="sticky top-4 divide-y divide-gray-300">
<div className="space-y-1 pb-8">
{navigation.map((item) => (
<Link href={item.href} key={item.name}>
<a
key={item.name}
href={item.href}
className={clsx(
item.href == currentPage
? 'bg-gray-200 text-gray-900'
: 'text-gray-600 hover:bg-gray-50',
'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>
<SidebarItem item={item} currentPage={currentPage} />
))}
</div>
<div className="pt-10">
<p
className="px-3 text-xs font-semibold uppercase tracking-wider text-gray-500"
id="communities-headline"
>
My communities
</p>
<div className="mt-3 space-y-2" aria-labelledby="communities-headline">
<SidebarItem
item={{ name: 'Communities', href: '/folds', icon: UserGroupIcon }}
currentPage={currentPage}
/>
<div className="mt-3 space-y-2">
{communities.map((community) => (
<a
key={community.name}
href={community.href}
className="group flex items-center rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:bg-gray-50 hover:text-gray-900"
>
<span className="truncate">{community.name}</span>
<span className="truncate">&nbsp; {community.name}</span>
</a>
))}
</div>