Looking for a way to customize the active link style using styled components.
I have a navigation bar where the currently active link should have a specific style applied.
Any suggestions are appreciated!
import React from 'react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { bool } from 'prop-types';
import StyledSidebar from '../../styles/header/styled.sidebar'
import StyledLink from '../../styles/header/styled.links'
export default function Sidebar({ open }) {
const router = useRouter()
return (
<StyledSidebar open={open}>
<div>
<ul>
<StyledLink><Link href="/" className={router.pathname == "/" ? 'active' : ''}>HOME</Link></StyledLink>
<StyledLink><Link href="/destination" className={router.pathname == "/destination" ? 'active' : ''}>DESTINATION</Link></StyledLink>
<StyledLink><Link href="/crew" className={router.pathname == "/crew" ? 'active' : ''}>CREW</Link></StyledLink>
<StyledLink><Link href="/technology" className={router.pathname == "/" ? 'active' : ''}>TECHNOLOGY</Link></StyledLink>
</ul>
</div>
</StyledSidebar>
)
}
Sidebar.propTypes = {
open: bool.isRequired,
};