mirror of
https://github.com/theoludwig/theoludwig.git
synced 2024-11-10 14:28:08 +01:00
55 lines
1.3 KiB
TypeScript
55 lines
1.3 KiB
TypeScript
|
import Link from 'next/link'
|
||
|
|
import { useRouter } from 'next/router'
|
||
|
|
import classNames from 'classnames'
|
||
|
|
|
||
|
|
type NavigationLinkComponent = React.FC<{ path: string }>
|
||
|
|
|
||
|
|
export const NavigationLink: NavigationLinkComponent = props => {
|
||
|
|
const { pathname } = useRouter()
|
||
|
|
const isCurrentPage = pathname === props.path
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<li className='navbar-item'>
|
||
|
|
<Link href={props.path}>
|
||
|
|
<a
|
||
|
|
className={classNames('navbar-link', {
|
||
|
|
'navbar-link-active': isCurrentPage
|
||
|
|
})}
|
||
|
|
>
|
||
|
|
{props.children}
|
||
|
|
</a>
|
||
|
|
</Link>
|
||
|
|
</li>
|
||
|
|
|
||
|
|
<style jsx>
|
||
|
|
{`
|
||
|
|
.navbar-link {
|
||
|
|
display: block;
|
||
|
|
padding: 0.5rem 1rem;
|
||
|
|
}
|
||
|
|
.navbar-link:hover {
|
||
|
|
text-decoration: none;
|
||
|
|
color: rgba(255, 255, 255, 0.75);
|
||
|
|
}
|
||
|
|
.navbar-link,
|
||
|
|
.navbar-link-active {
|
||
|
|
color: rgba(255, 255, 255, 0.5);
|
||
|
|
}
|
||
|
|
.navbar-link-active,
|
||
|
|
.navbar-link-active:hover {
|
||
|
|
color: var(--text-color);
|
||
|
|
}
|
||
|
|
.navbar-item {
|
||
|
|
list-style: none;
|
||
|
|
}
|
||
|
|
.navbar-link {
|
||
|
|
font-size: 16px;
|
||
|
|
padding: 0.5rem;
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|