/
vanzinfed
/
React_App_SuperApp
Обзор
Документация
Войти
/
vanzinfed
/
React_App_SuperApp
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
Аналитика
Безопасность
develop
src/components/Navbar/Navbar.js
45 строк
2 KB
DONTSTOP
Initial commit
12 ноя 2024, 11:54
12 ноя 2024, 11:54
55b4a65
Код
Авторство
О чём код?
import React, { useState } from "react"; import "./Navbar.css"; import logoImage from "./logo.png"; // Укажите путь к вашему изображению логотипа function Navbar() { const [isMenuOpen, setIsMenuOpen] = useState(false); const toggleMenu = () => { setIsMenuOpen(!isMenuOpen); }; const closeMenu = () => { setIsMenuOpen(false); }; return ( <> <nav className="navbar"> <a href="#main" onClick={closeMenu}> <img src={logoImage} alt="Logo" className="logo" /> </a> <div className="burger-menu" onClick={toggleMenu}> <div className="burger"></div> <div className="burger"></div> <div className="burger"></div> </div> <ul className={`nav-links ${isMenuOpen ? 'active' : ''}`}> <li><button className="close-button" onClick={closeMenu}>×</button></li> <li><a href="#main" onClick={closeMenu}>Главная</a></li> <li><a href="#about" onClick={closeMenu}>О</a></li> <li><a href="#timeline" onClick={closeMenu}>История</a></li> <li><a href="#advantages" onClick={closeMenu}>Преимущества</a></li> <li><a href="#future" onClick={closeMenu}>Будущее</a></li> <li><a href="#video-review" onClick={closeMenu}>Видео</a></li> <li><a href="#example" onClick={closeMenu}>Примеры</a></li> <li><a href="#business" onClick={closeMenu}>Бизнес</a></li> <li><a href="#team" onClick={closeMenu}>Команда</a></li> <li><a href="#contact" onClick={closeMenu}>Контакты</a></li> </ul> </nav> <div className={`overlay ${isMenuOpen ? 'active' : ''}`} onClick={closeMenu}></div> </> ); } export default Navbar;