35 lines
912 B
TypeScript
35 lines
912 B
TypeScript
import s from './styles.module.css'
|
|
import cx from 'classnames'
|
|
import { useRouter } from 'next/router'
|
|
import { ActiveLink } from './ActiveLink'
|
|
import { isPartOfPath } from 'src/lib/url'
|
|
|
|
export type MenuItemProps = {
|
|
href: string
|
|
}
|
|
|
|
export const MenuItem: React.FC<MenuItemProps> = props => {
|
|
const ignore = ['/']
|
|
const router = useRouter()
|
|
const current = router.asPath === props.href
|
|
const selected = current || (!ignore.includes(props.href) && isPartOfPath(props.href, router.asPath))
|
|
const href = current ? null : props.href
|
|
|
|
return (
|
|
<li
|
|
className={cx({
|
|
[s.selected]: selected,
|
|
})}
|
|
>
|
|
<ActiveLink
|
|
href={href}
|
|
activeStyle={{
|
|
fontWeight: 'bold'
|
|
}}
|
|
>
|
|
{props.children}
|
|
</ActiveLink>
|
|
</li>
|
|
)
|
|
}
|