FinalProject/src/components/Header.jsx

import * as React from 'react';
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import Menu from '@mui/material/Menu';
import MenuIcon from '@mui/icons-material/Menu';
import Container from '@mui/material/Container';
import Avatar from '@mui/material/Avatar';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import MenuItem from '@mui/material/MenuItem';
import SearchIcon from '@mui/icons-material/Search';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import ManageSearchIcon from '@mui/icons-material/ManageSearch';
import Link from "react-router-dom/es/Link";
import '../scss/Header.scss';
import {useState} from "react";

const pages = ['catalog', 'about us', 'our team', 'faq', 'contact'];
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];

const Header = () => {
    const [anchorElNav, setAnchorElNav] = useState(null);
    const [anchorElUser, setAnchorElUser] = useState(null);

    const handleOpenNavMenu = (event) => {
        setAnchorElNav(event.currentTarget);
    };
    const handleOpenUserMenu = (event) => {
        setAnchorElUser(event.currentTarget);
    };

    const handleCloseNavMenu = () => {
        setAnchorElNav(null);
    };
    const handleCloseUserMenu = () => {
        setAnchorElUser(null);
    };

    const LogoItem = () => {
        return (
            <Link to='/' className="Header__Logo"> ABRAXAS </Link>
        )
    }
    const LinkItem = ({page, color='white'}) => {
        return (
            <Button
                key={page}
                onClick={handleCloseNavMenu}
                sx={{ my: 2, color: color, display: 'block'}}
            >
                <Link
                    to={`/${Array.from(page.toLowerCase()).map(i => i === ' ' ? '-' : i).join('')}`}
                    className="Header__Link"> {page}
                </Link>
            </Button>
        )
    }
    const IconItems = ({size="large", color='default'}) => {
        return (
            <>
                <Link to='/search'>
                    <IconButton size={size} aria-label="search" color={color}>
                        <SearchIcon />
                    </IconButton>
                </Link>
                <Link to='/my-orders'>
                    <IconButton size={size} aria-label="my-orders" color={color}>
                        <ManageSearchIcon />
                    </IconButton>
                </Link>
                <Link to='/wish-list'>
                    <IconButton size={size} aria-label="wish-list" color={color}>
                        <FavoriteBorderIcon />
                    </IconButton>
                </Link>
                <Link to='/basket'>
                    <IconButton size={size} aria-label="basket" color={color}>
                        <ShoppingCartIcon />
                    </IconButton>
                </Link>
            </>
        )
    }

    return (
        <AppBar className='Header' position="fixed">
            <Container maxWidth="xl">
                <Toolbar disableGutters>
                    {/*Основной логотип*/}
                    <Typography
                        variant="h6"
                        noWrap
                        component="div"
                        sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
                    >
                        <LogoItem/>
                    </Typography>

                    {/*Меню бургер*/}
                    <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
                        <IconButton
                            size="large"
                            aria-label="account of current user"
                            aria-controls="menu-appbar"
                            aria-haspopup="true"
                            onClick={handleOpenNavMenu}
                            color="inherit"
                        >
                            <MenuIcon />
                        </IconButton>
                        <Menu className='Header__Burger'
                            id="menu-appbar"
                            anchorEl={anchorElNav}
                            anchorOrigin={{
                                vertical: 'bottom',
                                horizontal: 'left',
                            }}
                            keepMounted
                            transformOrigin={{
                                vertical: 'top',
                                horizontal: 'left',
                            }}
                            open={Boolean(anchorElNav)}
                            onClose={handleCloseNavMenu}
                            sx={{
                                display: { xs: 'block', md: 'none' },
                            }}
                        >
                            {pages.map((page) => (
                                <MenuItem key={page} onClick={handleCloseNavMenu}>
                                    <LinkItem page={page} color={'#fff'}/>
                                </MenuItem>
                            ))}
                            <MenuItem onClick={handleCloseNavMenu}>
                                <IconItems size={'large'} color={'inherit'}/>
                            </MenuItem>
                        </Menu>
                    </Box>

                    {/*Логитип для смартфонов*/}
                    <Typography
                        variant="h6"
                        noWrap
                        component="div"
                        sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
                    >
                        <LogoItem />
                    </Typography>

                    {/*Основные ссылки для декстопа*/}
                    <Box className='Header__Links' sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
                        {pages.map((page) => (
                            <LinkItem page={page} color={'#fff'}/>
                        ))}
                    </Box>

                    {/*Иконки для декстопа*/}
                    <Box className='Header__Icons' sx={{ flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
                        <IconItems size={'large'}/>
                    </Box>

                    {/*Пользователь*/}
                    <Box sx={{ flexGrow: 0 }}>
                        <Tooltip title="Open settings">
                            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                                <Avatar alt="User" src="/static/images/avatar/2.jpg" />
                            </IconButton>
                        </Tooltip>
                        <Menu
                            sx={{ mt: '45px' }}
                            id="menu-appbar"
                            anchorEl={anchorElUser}
                            anchorOrigin={{
                                vertical: 'top',
                                horizontal: 'right',
                            }}
                            keepMounted
                            transformOrigin={{
                                vertical: 'top',
                                horizontal: 'right',
                            }}
                            open={Boolean(anchorElUser)}
                            onClose={handleCloseUserMenu}
                        >
                            {settings.map((setting) => (
                                <MenuItem key={setting} onClick={handleCloseNavMenu}>
                                    <Typography textAlign="center">{setting}</Typography>
                                </MenuItem>
                            ))}
                        </Menu>
                    </Box>
                </Toolbar>
            </Container>
        </AppBar>
    );
};
export default Header;