123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201 |
- 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;
|