Assistant: 
User: import React, { useEffect, useState } from 'react';
import Button from '@mui/material/Button';
import { AppBar, Container, IconButton, Menu, MenuItem, Toolbar, Typography, Divider } from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import { useThemeToggle } from './ThemeContext';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';

function Home() {
  const { toggleTheme, darkMode } = useThemeToggle();
  const [anchorEl, setAnchorEl] = useState(null);
  const [tests, setTests] = useState([]);
  const navigate = useNavigate();

  const handleMenuClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleMenuClose = () => {
    setAnchorEl(null);
  };

  const handleLogout = () => {
    console.log("Выход из аккаунта");
    toggleTheme(false); // Устанавливаем светлую тему при выходе
    navigate('/'); // Переход на главную страницу
    handleMenuClose();
  };

  const handleProfile = () => {
    navigate('/profile'); // Переход на страницу профиля
    handleMenuClose();
  };

  const handleCreateTest = () => {
    navigate('/testcreate'); // Переход на страницу создания теста
  };

  const handleGoTest = () => {
    navigate('/testgo')
  };

  useEffect(() => {
    // Получение тестов из базы данных
    axios.get('http://127.0.0.1:8081/api/tests')
      .then(response => {
        setTests(response.data);
      })
      .catch(error => {
        console.error("Error fetching tests:", error);
      });
  }, []);

  return (
    <div style={{ minHeight: '100vh', backgroundColor: darkMode ? '#121212' : '#ffffff' }}>
      <AppBar position='fixed'>
        <Container fixed>
          <Toolbar sx={{ justifyContent: 'flex-start' }}>
            <IconButton edge='start' color="inherit" aria-label="menu" onClick={handleMenuClick}>
              <MenuIcon />
            </IconButton>
            <Typography variant="h6" sx={{ flexGrow: 4, textAlign: 'center' }}>
              Test based from AI
            </Typography>
            <Button variant="contained" color="primary" sx={{ marginLeft: 2 }} onClick={handleCreateTest}>
              Создать Тест
            </Button>
            <Button variant="contained" color="primary" sx={{ marginLeft: 2 }} onClick={handleGoTest} >
              Войти в Тест
            </Button>
          </Toolbar>
          <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose}>
            <MenuItem onClick={handleProfile}>Профиль</MenuItem>
            <MenuItem onClick={() => { toggleTheme(); handleMenuClose(); }} sx={{ justifyContent: 'center' }}>
              Переключить тему
            </MenuItem>
            <Divider />
            <MenuItem onClick={handleLogout}>Выход</MenuItem>
          </Menu>
        </Container>
      </AppBar>
      <Container sx={{ marginTop: '80px' }}>
        <Typography variant="h4" sx={{ textAlign: 'center', marginBottom: '20px' }}>
          Мои тесты
        </Typography>
        <div>
          {tests.length > 0 ? (
            tests.map(test => (
              <div key={test.id} style={{ marginBottom: '10px' }}>
                <Typography variant="h6">{test.title}</Typography>
                <Typography variant="body1">{test.description}</Typography>
              </div>
            ))
          ) : (
            <Typography variant="body1" sx={{ textAlign: 'center' }}>
              Тесты отсутствуют
            </Typography>
          )}
        </div>
      </Container>
    </div>
  );
}

export default Home;


зделай стиль покрасивей
????? ????? ???????????? ??? ?????????? ???????? ? ????? ??????? ? JavaScript?
Options: ["push()", "pop()", "shift()", "unshift()"]
Assistant: