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 | 1x 1x 1x 1x 1x 1x 1x 23x 23x 10x 1x 1x 10x 10x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 23x 1x | import { NavLink } from 'react-router-dom';
import Navbar from '../Navbar/NavBar';
import { useEffect, useState } from 'react';
import { FaBars, FaTimes } from 'react-icons/fa';
import Button from '@/shared/components/button/Button';
import classNames from 'classnames';
const Header = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
useEffect(() => {
const handleEsc = (e: KeyboardEvent) => {
if (e.key === 'Escape') setIsMobileMenuOpen(false);
};
document.addEventListener('keydown', handleEsc);
return () => document.removeEventListener('keydown', handleEsc);
}, []);
return (
<header className="header" role="banner">
<h2 className="header-title">
<NavLink to={'/'}>Rick and Morty Characters</NavLink>
</h2>
<Button
className={classNames('burger-icon', { open: isMobileMenuOpen })}
handleClick={() => setIsMobileMenuOpen((prev) => !prev)}
aria-label={isMobileMenuOpen ? 'Close Menu' : 'Open Menu'}
aria-expanded={isMobileMenuOpen}
aria-controls="main-navigation"
>
{isMobileMenuOpen ? <FaTimes /> : <FaBars />}
</Button>
<Navbar isMobileMenuOpen={isMobileMenuOpen} onClose={() => setIsMobileMenuOpen(false)} />
</header>
);
};
export default Header;
|