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

Hook up sidebar options to the current page

Browse Source
This commit is contained in:
Austin Chen 2022-03-17 10:03:30 -07:00
parent 18b3e25995
commit 50ab6dc6de
1 changed files with 34 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,14 +3,19 @@ import {
FireIcon, FireIcon,
UserGroupIcon, UserGroupIcon,
TrendingUpIcon, TrendingUpIcon,
SearchIcon,
CollectionIcon,
} from '@heroicons/react/outline' } from '@heroicons/react/outline'
import clsx from 'clsx' import clsx from 'clsx'
import Link from 'next/link'
import { useRouter } from 'next/router'
const navigation = [ const navigation = [
{ name: 'Home', href: '#', icon: HomeIcon, current: true }, { name: 'Home', href: '/home', icon: HomeIcon },
{ name: 'Popular', href: '#', icon: FireIcon, current: false }, { name: 'Markets', href: '/markets', icon: SearchIcon },
{ name: 'Communities', href: '#', icon: UserGroupIcon, current: false }, { name: 'Communities', href: '/folds', icon: UserGroupIcon },
{ name: 'Trending', href: '#', icon: TrendingUpIcon, current: false }, { name: 'Trades', href: '/trades', icon: CollectionIcon },
// { name: 'Trending', href: '#', icon: TrendingUpIcon, current: false },
] ]
const communities = [ const communities = [
@ -25,32 +30,37 @@ const communities = [
] ]
export default function Sidebar() { export default function Sidebar() {
const router = useRouter()
const currentPage = router.pathname
return ( return (
<nav aria-label="Sidebar" className="sticky top-4 divide-y divide-gray-300"> <nav aria-label="Sidebar" className="sticky top-4 divide-y divide-gray-300">
<div className="space-y-1 pb-8"> <div className="space-y-1 pb-8">
{navigation.map((item) => ( {navigation.map((item) => (
<a <Link href={item.href} key={item.name}>
key={item.name} <a
href={item.href} key={item.name}
className={clsx( href={item.href}
item.current
? '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.current ? 'page' : undefined}
>
<item.icon
className={clsx( className={clsx(
item.current item.href == currentPage
? 'text-gray-500' ? 'bg-gray-200 text-gray-900'
: 'text-gray-400 group-hover:text-gray-500', : 'text-gray-600 hover:bg-gray-50',
'-ml-1 mr-3 h-6 w-6 flex-shrink-0' 'group flex items-center rounded-md px-3 py-2 text-sm font-medium'
)} )}
aria-hidden="true" aria-current={item.href == currentPage ? 'page' : undefined}
/> >
<span className="truncate">{item.name}</span> <item.icon
</a> 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>
))} ))}
</div> </div>
<div className="pt-10"> <div className="pt-10">