Valery Petrov
83 lines
3.2 KiB
React
83 lines
3.2 KiB
React
import { Link } from 'react-router-dom';
|
|
import { useState, useRef, useEffect } from 'react';
|
|
|
|
import { UserBurger } from '../UserBurger/UserBurger';
|
|
import { SidebarNavItem } from '../SidebarNavItem/SidebarNavItem';
|
|
import styles from './Navbar.module.scss';
|
|
|
|
export const Navbar = () => {
|
|
const links = [
|
|
{ to: '/', icon: 'fas fa-home', label: 'Главная', end: true },
|
|
{ to: '/specialist', icon: 'fas fa-user-md', label: 'Врачи' },
|
|
{ to: '/lostDoctors', icon: 'fas fa-address-card', label: 'Врачи-потеряшки' },
|
|
{ to: '/infoclinic', icon: 'fas fa-table', label: 'Расписание ИК' },
|
|
{ to: '/prices',icon: 'fas fa-receipt', label: 'Цены и услуги' },
|
|
{ to: '/promotions',icon: 'fas fa-percent', label: 'Акции' },
|
|
{ to: '/departments',icon: 'fas fa-stethoscope', label: 'Отделения' },
|
|
{ to: '/filials',icon: 'fas fa-building', label: 'Филиалы' },
|
|
{ to: '/news', icon: 'fas fa-newspaper', label: 'Новости' },
|
|
{ to: '/site-promo', icon: 'fas fa-bullhorn', label: 'Промо (контент)' },
|
|
{ to: '/disease', icon: 'fas fa-heartbeat', label: 'Заболевания' },
|
|
{ to: '/medical-center', icon: 'fas fa-hospital', label: 'Медцентры' },
|
|
{ to: '/article', icon: 'fas fa-file-alt', label: 'Статьи' },
|
|
{ to: '/site-services', icon: 'fas fa-concierge-bell', label: 'Услуги сайта' },
|
|
];
|
|
const [open, setOpen] = useState(false);
|
|
const toggleRef = useRef(null);
|
|
const menuRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
const handleOutside = e => {
|
|
if (
|
|
menuRef.current &&
|
|
!menuRef.current.contains(e.target) &&
|
|
toggleRef.current &&
|
|
!toggleRef.current.contains(e.target)
|
|
) {
|
|
setOpen(false)
|
|
}
|
|
}
|
|
document.addEventListener('mousedown', handleOutside)
|
|
return () => document.removeEventListener('mousedown', handleOutside)
|
|
}, []);
|
|
|
|
return (
|
|
<nav className={`navbar navbar-expand navbar-light topbar mb-4 static-top shadow ${styles['navbar-background']}`}>
|
|
<div className="d-lg-none mr-3">
|
|
<button
|
|
className="btn btn-outline-success"
|
|
type="button"
|
|
onClick={() => setOpen(o => !o)}
|
|
aria-haspopup="true"
|
|
aria-expanded={open}
|
|
ref={toggleRef}
|
|
>
|
|
<span className="navbar-toggler-icon"></span>
|
|
</button>
|
|
{open && (
|
|
<div
|
|
ref={menuRef}
|
|
className="dropdown-menu dropdown-menu-left shadow animated--grow-in show bg-gradient-primary sidebar-dark"
|
|
aria-labelledby="userMenu"
|
|
>
|
|
{links.map(({ to, icon, label, end }) => (
|
|
<SidebarNavItem
|
|
key={to}
|
|
to={to}
|
|
icon={icon}
|
|
label={label}
|
|
end={end}
|
|
onClick={() => setOpen(false)}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Link className="navbar-brand" to="/">
|
|
<img src="/src/assets/logo.png" alt="" style={{height: '3rem'}}/>
|
|
</Link>
|
|
<UserBurger />
|
|
</nav>
|
|
)
|
|
};
|