frontend/src/components/Header.js - master - Krams/nodemon

frontend/src/components/Header.js
57 строк2 KB
Krams
first_commit
08 июн 2025, 12:17
08 июн 2025, 12:1725d7395
// Компонент навигационной панели с авторизацией
import React from 'react';
import { Navbar, Nav, Container, NavDropdown } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { useSelector, useDispatch } from 'react-redux';
import { logout } from '../features/auth/authSlice';
import 'bootstrap/dist/css/bootstrap.min.css';

const Header = () => {
  // Redux хуки
  const dispatch = useDispatch();
  const user = useSelector((state) => state.auth.user);

  // Обработчик выхода из системы
  const handleLogout = () => {
    dispatch(logout());
  };

  // Стили для навбара
  const navbarStyle = {
    backgroundColor: "#1D1D1D", 
    borderRadius: "10px"
  };

  return (
    <Navbar style={navbarStyle} bg="dark" variant="dark" expand="lg">
      <Container>
        {/* Логотип */}
        <Navbar.Brand href="/map">Nodemon</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        
        <Navbar.Collapse id="basic-navbar-nav">
          {/* Основная навигация */}
          <Nav className="me-auto">
            <Nav.Link as={Link} to="/map">Карта</Nav.Link>
            <Nav.Link as={Link} to="/chart">Диаграмма</Nav.Link>
            <Nav.Link as={Link} to="/list">Узлы</Nav.Link>
            <Nav.Link as={Link} to="/lists">Списки</Nav.Link>
          </Nav>

          {/* Блок авторизации */}
          <Nav data-bs-theme="dark" className="ms-auto">
            {user ? (
              <NavDropdown title={user.first_name} id="user-dropdown" align="end">
                <NavDropdown.Item onClick={handleLogout}>Выйти</NavDropdown.Item>
              </NavDropdown>
            ) : (
              <Nav.Link as={Link} to="/login">Войти</Nav.Link>
            )}
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default Header;