|
|
@@ -0,0 +1,201 @@
|
|
|
+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;
|
Alex