Header.jsx 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. import {AppBar, Box, Toolbar, IconButton, Typography, Menu, Container, Avatar, Button, Tooltip, MenuItem, Badge} from '@mui/material';
  2. import MenuIcon from '@mui/icons-material/Menu';
  3. import SearchIcon from '@mui/icons-material/Search';
  4. import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
  5. import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
  6. import ManageSearchIcon from '@mui/icons-material/ManageSearch';
  7. import Link from "react-router-dom/es/Link";
  8. import {useState} from "react";
  9. import '../scss/Header.scss';
  10. const pages = ['catalog', 'about us', 'our team', 'faq', 'contact'];
  11. const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
  12. const Header = () => {
  13. const [anchorElNav, setAnchorElNav] = useState(null);
  14. const [anchorElUser, setAnchorElUser] = useState(null);
  15. const handleOpenNavMenu = (event) => {
  16. setAnchorElNav(event.currentTarget);
  17. };
  18. const handleOpenUserMenu = (event) => {
  19. setAnchorElUser(event.currentTarget);
  20. };
  21. const handleCloseNavMenu = () => {
  22. setAnchorElNav(null);
  23. };
  24. const handleCloseUserMenu = () => {
  25. setAnchorElUser(null);
  26. };
  27. const LogoItem = () => {
  28. return (
  29. <Link to='/' className="Header__Logo"> ABRAXAS </Link>
  30. )
  31. }
  32. const LinkItem = ({page, color='white'}) => {
  33. return (
  34. <Button
  35. key={page}
  36. onClick={handleCloseNavMenu}
  37. sx={{ my: 2, color: color, display: 'block'}}
  38. >
  39. <Link
  40. to={`/${Array.from(page.toLowerCase()).map(i => i === ' ' ? '-' : i).join('')}`}
  41. className="Header__Link"> {page}
  42. </Link>
  43. </Button>
  44. )
  45. }
  46. const IconItems = ({size="large", color='default', valueWishList=0, valueBasket=0}) => {
  47. return (
  48. <>
  49. <Link to='/search'>
  50. <IconButton size={size} aria-label="search" color={color}>
  51. <SearchIcon />
  52. </IconButton>
  53. </Link>
  54. <Link to='/my-orders'>
  55. <IconButton size={size} aria-label="my-orders" color={color}>
  56. <ManageSearchIcon />
  57. </IconButton>
  58. </Link>
  59. <Link to='/wish-list'>
  60. <IconButton size={size} aria-label="wish-list" color={color}>
  61. <Badge
  62. color="success"
  63. badgeContent={valueWishList}
  64. anchorOrigin={{
  65. vertical: 'bottom',
  66. horizontal: 'right',
  67. }}
  68. >
  69. <FavoriteBorderIcon />
  70. </Badge>
  71. </IconButton>
  72. </Link>
  73. <Link to='/basket'>
  74. <IconButton size={size} aria-label="basket" color={color}>
  75. <Badge
  76. color="success"
  77. badgeContent={valueBasket}
  78. anchorOrigin={{
  79. vertical: 'bottom',
  80. horizontal: 'right',
  81. }}
  82. >
  83. <ShoppingCartIcon/>
  84. </Badge>
  85. </IconButton>
  86. </Link>
  87. </>
  88. )
  89. }
  90. return (
  91. <AppBar sx={{padding: '10px 0', backgroundColor: 'rgb(131,179,175)'}} className='Header' position="fixed" enableColorOnDark={true}>
  92. <Container maxWidth="xl">
  93. <Toolbar disableGutters>
  94. {/*Основной логотип*/}
  95. <Typography
  96. variant="h6"
  97. noWrap
  98. component="div"
  99. sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
  100. >
  101. <LogoItem/>
  102. </Typography>
  103. {/*Меню бургер*/}
  104. <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
  105. <IconButton
  106. size="large"
  107. aria-label="account of current user"
  108. aria-controls="menu-appbar"
  109. aria-haspopup="true"
  110. onClick={handleOpenNavMenu}
  111. color="inherit"
  112. >
  113. <MenuIcon />
  114. </IconButton>
  115. <Menu className='Header__Burger'
  116. id="menu-appbar"
  117. anchorEl={anchorElNav}
  118. anchorOrigin={{
  119. vertical: 'bottom',
  120. horizontal: 'left',
  121. }}
  122. keepMounted
  123. transformOrigin={{
  124. vertical: 'top',
  125. horizontal: 'left',
  126. }}
  127. open={Boolean(anchorElNav)}
  128. onClose={handleCloseNavMenu}
  129. sx={{
  130. display: { xs: 'block', md: 'none' },
  131. }}
  132. >
  133. {pages.map((page) => (
  134. <MenuItem key={page} onClick={handleCloseNavMenu}>
  135. <LinkItem page={page} color={'#fff'}/>
  136. </MenuItem>
  137. ))}
  138. <MenuItem onClick={handleCloseNavMenu}>
  139. <IconItems size={'large'} color={'inherit'}/>
  140. </MenuItem>
  141. </Menu>
  142. </Box>
  143. {/*Логитип для смартфонов*/}
  144. <Typography
  145. variant="h6"
  146. noWrap
  147. component="div"
  148. sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
  149. >
  150. <LogoItem />
  151. </Typography>
  152. {/*Основные ссылки для декстопа*/}
  153. <Box className='Header__Links' sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
  154. {pages.map((page) => (
  155. <LinkItem page={page} color={'#fff'}/>
  156. ))}
  157. </Box>
  158. {/*Иконки для декстопа*/}
  159. <Box className='Header__Icons' sx={{ flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
  160. <IconItems size={'large'}/>
  161. </Box>
  162. {/*Пользователь*/}
  163. <Box sx={{ flexGrow: 0 }}>
  164. <Tooltip title="Open settings">
  165. <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
  166. <Avatar alt="User" src="/static/images/avatar/2.jpg" />
  167. </IconButton>
  168. </Tooltip>
  169. <Menu
  170. sx={{ mt: '45px' }}
  171. id="menu-appbar"
  172. anchorEl={anchorElUser}
  173. anchorOrigin={{
  174. vertical: 'top',
  175. horizontal: 'right',
  176. }}
  177. keepMounted
  178. transformOrigin={{
  179. vertical: 'top',
  180. horizontal: 'right',
  181. }}
  182. open={Boolean(anchorElUser)}
  183. onClose={handleCloseUserMenu}
  184. >
  185. {settings.map((setting) => (
  186. <MenuItem key={setting} onClick={handleCloseNavMenu}>
  187. <Typography textAlign="center">{setting}</Typography>
  188. </MenuItem>
  189. ))}
  190. </Menu>
  191. </Box>
  192. </Toolbar>
  193. </Container>
  194. </AppBar>
  195. );
  196. };
  197. export default Header;