src/components/Header.jsx - master - perminevma/frontend

src/components/Header.jsx
76 строк2 KB
ivgrd
+svetlaya_tema_adptv
28 авг 2025, 22:21
28 авг 2025, 22:21cacdb52
// frontend/src/components/Header.jsx
import React from 'react';
import { AppBar, Toolbar, Typography, Button, Box, IconButton, Tooltip } from '@mui/material';
import { useNavigate } from 'react-router-dom';
import LightModeIcon from '@mui/icons-material/LightMode';
import DarkModeIcon from '@mui/icons-material/DarkMode';

const Header = ({ user, onLogout, themeMode = 'dark', onToggleTheme }) => {
  const navigate = useNavigate();
  const isLight = themeMode === 'light';

  return (
    <AppBar
      position="static"
      sx={(theme) => ({
        background:
          theme.palette.mode === 'light'
            ? 'linear-gradient(135deg, #ffffff, #f3f4f6)'
            : 'linear-gradient(135deg, #111827, #0b0f19)',
        borderBottom: `1px solid ${theme.palette.divider}`,
        mb: 3,
        borderRadius: '0 0 14px 14px',
        color: theme.palette.mode === 'light' ? '#111827' : '#e5e7eb', // <-- цвет текста/иконок
      })}
    >
      <Toolbar>
        <Typography
          variant="h6"
          sx={{ flexGrow: 1, cursor: 'pointer' }}
          onClick={() => navigate('/')}
        >
          🔧 Diagnostic System
        </Typography>

        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
          <Tooltip title={isLight ? 'Светлая тема' : 'Тёмная тема'}>
            <IconButton
              onClick={onToggleTheme}
              aria-label="toggle theme"
              sx={{
                color: isLight ? '#111827' : '#e5e7eb', // <-- иконка тоже контрастная
              }}
            >
              {isLight ? <LightModeIcon /> : <DarkModeIcon />}
            </IconButton>
          </Tooltip>

          <Typography sx={{ mx: 1 }}>
            👤 {user?.username}
          </Typography>

          <Button
            onClick={onLogout}
            sx={(theme) => ({
              color: theme.palette.mode === 'light' ? '#111827' : '#e5e7eb',
              background:
                theme.palette.mode === 'light'
                  ? 'rgba(0,0,0,0.06)'
                  : 'rgba(255,255,255,0.1)',
              '&:hover': {
                background:
                  theme.palette.mode === 'light'
                    ? 'rgba(0,0,0,0.12)'
                    : 'rgba(255,255,255,0.2)',
              },
            })}
          >
            Выйти
          </Button>
        </Box>
      </Toolbar>
    </AppBar>
  );
};

export default Header;