status-frontend/src/components/Menu.tsx

39 lines
914 B
TypeScript

import React from 'react'
import { useRouter } from 'next/router'
import Link from 'next/link'
import styles from './Menu.module.css'
function MenuLink({ name, path }: { name: string; path: string }) {
const router = useRouter()
const classes =
router?.pathname === path ? `${styles.link} ${styles.active}` : styles.link
console.log(name, path)
console.log('classes', classes)
console.log('router', router.pathname)
return (
<Link href={path} className={classes}>
{name}
</Link>
)
}
export default function Menu() {
return (
<nav className={styles.menu}>
<ul className={styles.navigation}>
<li>
<MenuLink name="Status" path="/" />
</li>
<li>
<MenuLink name="Core Stats" path="/stats" />
</li>
<li>
<MenuLink name="veOcean Stats" path="/veOceanStats" />
</li>
</ul>
</nav>
)
}