123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384 |
- import {AppBar, Box, Toolbar, IconButton, Typography, Menu, Container, Avatar, Button, Tooltip, MenuItem, Badge} from '@mui/material';
- import MenuIcon from '@mui/icons-material/Menu';
- 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 {useState} from "react";
- import '../scss/Header.scss';
- import {actionAuthLogout} from "../reducers/AuthReducer";
- import {connect} from "react-redux";
- import {actionUserRemove} from "../reducers/UserReducer";
- import {backURL} from "../actions/PathDB";
- import userDefault from "../img/header/userDefault.png"
- const pages = ['catalog', 'about us', 'our team', 'faq', 'contact']
- const settingsDefaultUserAuth = ['Profile', 'Dashboard', 'Logout']
- const Header = ({user={}}) => {
- 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.toString()}
- 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 = ({cart={}, wishlist={}, size="large", color='default'}) => {
- return (
- <>
- <Link to='/search'>
- <IconButton
- key={'search'}
- size={size}
- aria-label="search"
- color={color}
- >
- <SearchIcon />
- </IconButton>
- </Link>
- <Link to='/my-orders'>
- <IconButton
- key={'my-orders'}
- size={size}
- aria-label="my-orders"
- color={color}
- >
- <ManageSearchIcon />
- </IconButton>
- </Link>
- <Link to='/wish-list'>
- <IconButton
- key={'wish-list'}
- size={size}
- aria-label="wish-list"
- color={color}
- >
- <Badge
- color="success"
- badgeContent={+Object.entries(wishlist).length}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'right',
- }}
- >
- <FavoriteBorderIcon />
- </Badge>
- </IconButton>
- </Link>
- <Link to='/basket'>
- <IconButton
- key={'basket'}
- size={size}
- aria-label="basket"
- color={color}
- >
- <Badge
- color="success"
- badgeContent={+Object.entries(cart).reduce((a, b) => {
- return a + b[1].count
- }, 0)}
- anchorOrigin={{
- vertical: 'bottom',
- horizontal: 'right',
- }}
- >
- <ShoppingCartIcon/>
- </Badge>
- </IconButton>
- </Link>
- </>
- )
- }
- const CIconItems = connect(state => ({cart: state.cart, wishlist: state.wishlist}))(IconItems)
- const ItemAuth = ({link, text}) => {
- return (
- <Link
- style={{
- textDecoration: 'none',
- color: '#000'
- }}
- to={`/${link}`}
- >
- <MenuItem
- key={text}
- onClick={handleCloseNavMenu}
- >
- <Typography
- textAlign="center"
- color='#fff'
- >
- {text}
- </Typography>
- </MenuItem>
- </Link>
- )
- }
- const UserIcon = ({auth}) => {
- return (
- Object.entries(auth).length === 0 ?
- <Link
- style={{textDecoration: 'none'}}
- to={'/my-account'}
- >
- <IconButton sx={{ p: 0 }}>
- <Avatar
- alt="User default"
- src={userDefault}
- />
- </IconButton>
- </Link> :
- <>
- <Tooltip title="Open settings">
- <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
- {!auth.avatar && auth.avatar === null ?
- <Avatar
- alt="User"
- src={userDefault}/>
- :
- <Avatar
- alt="User"
- src={user?.avatar?.url && backURL + '/' + user?.avatar?.url}
- />
- }
- </IconButton>
- </Tooltip>
- <Menu
- sx={{ mt: '55px', ml: '90%'}}
- id="menu-appbar"
- anchorEl={anchorElUser}
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- keepMounted
- transformOrigin={{
- vertical: 'top',
- horizontal: 'right',
- }}
- open={Boolean(anchorElUser)}
- onClose={handleCloseUserMenu}
- >
- {settingsDefaultUserAuth.map(item => {
- if (item === 'Logout') {
- return <CButtonLogOut key={'Logout'}/>
- }
- else if(item === 'Dashboard'){
- if (auth.payload?.sub?.acl[2]){
- return (
- <ItemAuth
- link={'admin'}
- text={'Dashboard'}
- key={'admin'}
- />
- )
- }
- }
- else if(item !== 'Dashboard') {
- return (
- <ItemAuth
- key={item.toString()}
- text={item}
- link={Array.from(item.toLowerCase()).map(i => i === ' ' ? '-' : i).join('')}
- />
- )
- }
- })}
- </Menu>
- </>
- )
- }
- const CUserIcon = connect(state => ({auth: state.auth}))(UserIcon)
- const ButtonLogOut = ({actionLogOut, actionUserRemove}) => {
- return (
- <Button
- onClick={() => {
- actionLogOut();
- actionUserRemove();
- handleCloseNavMenu();
- }}
- style={{
- textDecoration: 'none',
- textTransform: 'capitalize',
- fontWeight: '400',
- color: '#fff',
- textAlign: "center",
- width: '100%'
- }}
- >
- Log out
- </Button>
- )
- }
- const CButtonLogOut = connect(null, {actionLogOut: actionAuthLogout,
- actionUserRemove: actionUserRemove})(ButtonLogOut)
- return (
- <AppBar
- sx={{
- padding: '10px 0',
- backgroundColor: 'rgb(131,179,175)'
- }}
- className='Header'
- position="fixed"
- enableColorOnDark={true}
- >
- <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.toString()}
- onClick={handleCloseNavMenu}
- >
- <LinkItem
- key={page.toString()}
- page={page}
- color={'#fff'}
- />
- </MenuItem>
- ))}
- <MenuItem onClick={handleCloseNavMenu}>
- <CIconItems
- 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
- key={page.toString()}
- page={page}
- color={'#fff'}
- />
- ))}
- </Box>
- <Box
- className='Header__Icons'
- sx={{
- flexGrow: 0,
- display: { xs: 'none', md: 'flex' }
- }}
- >
- <CIconItems size={'large'} />
- </Box>
- <Box sx={{ flexGrow: 0 }}>
- <CUserIcon/>
- </Box>
- </Toolbar>
- </Container>
- </AppBar>
- );
- };
- const CHeader = connect(state => ({user: state.user}))(Header)
- export default CHeader;
|