60 lines
1.8 KiB
JavaScript
60 lines
1.8 KiB
JavaScript
import { useEffect } from 'react';
|
|
import { NavLink, useLocation } from 'react-router-dom';
|
|
import { NAV } from './Header.jsx';
|
|
import SocialLinks from './SocialLinks.jsx';
|
|
import { useLeadModal } from '../context/LeadModalContext.jsx';
|
|
import './MobileMenu.css';
|
|
|
|
export default function MobileMenu({ onClose }) {
|
|
const { open } = useLeadModal();
|
|
const { pathname } = useLocation();
|
|
|
|
// закрываем при переходе на другую страницу и по Escape
|
|
useEffect(() => {
|
|
return undefined;
|
|
}, []);
|
|
useEffect(() => {
|
|
const onKey = (e) => {
|
|
if (e.key === 'Escape') onClose();
|
|
};
|
|
document.addEventListener('keydown', onKey);
|
|
return () => document.removeEventListener('keydown', onKey);
|
|
}, [onClose]);
|
|
useEffect(() => {
|
|
// первый рендер не закрывает меню, только смена адреса
|
|
const initial = pathname;
|
|
return () => {
|
|
if (initial !== window.location.pathname) onClose();
|
|
};
|
|
}, [pathname, onClose]);
|
|
|
|
return (
|
|
<>
|
|
<div className="mobile-menu__overlay" onClick={onClose} aria-hidden="true" />
|
|
<nav className="mobile-menu" aria-label="Меню">
|
|
{NAV.map((item) => (
|
|
<NavLink
|
|
key={item.to}
|
|
to={item.to}
|
|
onClick={onClose}
|
|
className={({ isActive }) => `mobile-menu__link${isActive ? ' mobile-menu__link--active' : ''}`}
|
|
>
|
|
{item.label}
|
|
</NavLink>
|
|
))}
|
|
<button
|
|
type="button"
|
|
className="btn btn--coral mobile-menu__cta"
|
|
onClick={() => {
|
|
onClose();
|
|
open({ form: 'appointment' });
|
|
}}
|
|
>
|
|
Записаться на приём
|
|
</button>
|
|
<SocialLinks className="mobile-menu__social" />
|
|
</nav>
|
|
</>
|
|
);
|
|
}
|