Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 1x 1x 1x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 27x 81x 81x 81x 81x 81x 81x 81x 81x 81x 81x 81x 27x 27x 27x 27x 1x | import classNames from 'classnames';
import { NavLink } from 'react-router-dom';
interface MenuItem {
name: string;
to: string;
}
interface Props {
isMobileMenuOpen?: boolean;
onClose?: () => void;
}
const Navbar: React.FC<Props> = ({ isMobileMenuOpen = false, onClose }) => {
const menuData: MenuItem[] = [
{
name: 'Characters',
to: '/',
},
{
name: 'Episodes',
to: '/episodes',
},
{
name: 'Location',
to: '/location',
},
];
return (
<nav
id="main-navigation"
className={classNames('navbar', { 'navbar--mobile': isMobileMenuOpen, 'navbar--visible': isMobileMenuOpen })}
role="navigation"
aria-label="Main navigation"
>
<ul className={classNames('menu')}>
{menuData?.map((item, i) => (
<li key={`menu-item-${i}`} onClick={onClose}>
<NavLink
className={({ isActive, isPending }) =>
classNames('item', {
pending: isPending,
active: isActive,
})
}
to={item.to as string}
>
<span>{item.name}</span>
</NavLink>
</li>
))}
</ul>
</nav>
);
};
export default Navbar;
|