SQuiz/frontPanel
2
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: header burger

Browse Source
This commit is contained in:
IlyaDoronin 2023-10-18 14:05:25 +03:00
parent 4cda3df268
commit f3f331a833
1 changed files with 100 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
src/ui_kit/Header/HeaderFull.tsx
View File

@ -1,71 +1,113 @@
import { Box, Container, IconButton, Typography, useTheme } from "@mui/material"; import {
Box,
Container,
IconButton,
Typography,
useTheme,
useMediaQuery,
} from "@mui/material";
import LogoutIcon from "@icons/LogoutIcon"; import LogoutIcon from "@icons/LogoutIcon";
import NavMenuItem from "./NavMenuItem"; import NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo"; import PenaLogo from "../PenaLogo";
import WalletIcon from "@icons/WalletIcon"; import WalletIcon from "@icons/WalletIcon";
import CustomAvatar from "./Avatar"; import CustomAvatar from "./Avatar";
import { Burger } from "@icons/Burger";
export default function HeaderFull() { export default function HeaderFull() {
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(500));
return ( return (
<Container <Container
component="nav" component="nav"
disableGutters disableGutters
maxWidth={false} maxWidth={false}
sx={{ sx={{
px: "16px", px: "16px",
display: "flex", display: "flex",
height: "80px", height: "80px",
alignItems: "center", alignItems: "center",
gap: "60px", gap: isTablet ? "20px" : "60px",
bgcolor: "white", flexDirection: isMobile ? "row-reverse" : "row",
borderBottom: "1px solid #E3E3E3", justifyContent: isMobile ? "space-between" : "center",
}} bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
}}
>
{isTablet && (
<Burger
// onClick={() => setMobileSidebar(!mobileSidebar)}
style={{ fontSize: "30px", color: "#000000", cursor: "pointer" }}
/>
)}
<PenaLogo width={124} />
{!isTablet && (
<Box
sx={{
display: "flex",
gap: "30px",
overflow: "hidden",
}}
> >
<PenaLogo width={124} /> <NavMenuItem text="Квизы" />
<Box <NavMenuItem text="Меню 2" isActive />
<NavMenuItem text="Меню 3" />
<NavMenuItem text="Меню 4" />
<NavMenuItem text="Меню 5" />
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" />
</Box>
)}
<Box sx={{ display: isMobile ? "none" : "flex", ml: "auto" }}>
{!isTablet && (
<>
<IconButton sx={{ p: 0 }}>
<WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
</IconButton>
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
<Typography
sx={{ sx={{
display: "flex", fontSize: "12px",
gap: "30px", lineHeight: "14px",
overflow: "hidden", color: theme.palette.grey3.main,
}} }}
> >
<NavMenuItem text="Квизы" /> Мой баланс
<NavMenuItem text="Меню 2" isActive /> </Typography>
<NavMenuItem text="Меню 3" /> <Typography
<NavMenuItem text="Меню 4" /> variant="body2"
<NavMenuItem text="Меню 5" /> color={theme.palette.brightPurple.main}
<NavMenuItem text="Меню 1" /> >
<NavMenuItem text="Меню 2" /> 00.00 руб.
</Typography>
</Box> </Box>
<Box </>
sx={{ )}
display: "flex", {!isMobile && (
ml: "auto", <>
}} <CustomAvatar
sx={{
ml: "27px",
backgroundColor: theme.palette.orange.main,
height: "36px",
width: "36px",
}}
/>
<IconButton
sx={{
ml: "20px",
bgcolor: "#F2F3F7",
borderRadius: "6px",
height: "36px",
width: "36px",
}}
> >
<IconButton sx={{ p: 0 }}> <LogoutIcon />
<WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" /> </IconButton>
</IconButton> </>
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}> )}
<Typography </Box>
sx={{ </Container>
fontSize: "12px", );
lineHeight: "14px", }
color: theme.palette.grey3.main,
}}
>Мой баланс</Typography>
<Typography variant="body2" color={theme.palette.brightPurple.main}>00.00 руб.</Typography>
</Box>
<CustomAvatar sx={{ ml: "27px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }} />
<IconButton
sx={{ ml: "20px", bgcolor: "#F2F3F7", borderRadius: "6px", height: "36px", width: "36px" }}
>
<LogoutIcon />
</IconButton>
</Box>
</Container>
);
}