/
iphmelev
/
theme-react-lab
Обзор
Документация
Войти
/
iphmelev
/
theme-react-lab
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
main
src/components/Navbar.jsx
33 строки
1 KB
Artem Khmelev
feat: React Router navigation with responsive Navbar
16 июл 2026, 11:45
16 июл 2026, 11:45
17a1db3
Код
Авторство
О чём код?
import React, { useState } from 'react'; import { Link, useLocation } from 'react-router-dom'; function Navbar() { const location = useLocation(); const [isOpen, setIsOpen] = useState(false); const isActive = (path) => location.pathname === path ? 'active' : ''; return ( <nav className="navbar"> <div className="logo"> <Link to="/">Logo</Link> </div> <button className="hamburger" onClick={() => setIsOpen(!isOpen)} aria-label="Меню" > <span className="bar"></span> <span className="bar"></span> <span className="bar"></span> </button> <ul className={`nav-links ${isOpen ? 'mobile-menu' : ''}`}> <li><Link to="/" className={isActive('/')}>Главная</Link></li> <li><Link to="/services" className={isActive('/services')}>Услуги</Link></li> <li><Link to="/contact" className={isActive('/contact')}>Контакты</Link></li> </ul> </nav> ); } export default Navbar;