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 NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo";
import WalletIcon from "@icons/WalletIcon";
import CustomAvatar from "./Avatar";
import { Burger } from "@icons/Burger";
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 (
<Container
component="nav"
disableGutters
maxWidth={false}
sx={{
px: "16px",
display: "flex",
height: "80px",
alignItems: "center",
gap: "60px",
bgcolor: "white",
borderBottom: "1px solid #E3E3E3",
}}
return (
<Container
component="nav"
disableGutters
maxWidth={false}
sx={{
px: "16px",
display: "flex",
height: "80px",
alignItems: "center",
gap: isTablet ? "20px" : "60px",
flexDirection: isMobile ? "row-reverse" : "row",
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} />
<Box
<NavMenuItem text="Квизы" />
<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={{
display: "flex",
gap: "30px",
overflow: "hidden",
fontSize: "12px",
lineHeight: "14px",
color: theme.palette.grey3.main,
}}
>
<NavMenuItem text="Квизы" />
<NavMenuItem text="Меню 2" isActive />
<NavMenuItem text="Меню 3" />
<NavMenuItem text="Меню 4" />
<NavMenuItem text="Меню 5" />
<NavMenuItem text="Меню 1" />
<NavMenuItem text="Меню 2" />
>
Мой баланс
</Typography>
<Typography
variant="body2"
color={theme.palette.brightPurple.main}
>
00.00 руб.
</Typography>
</Box>
<Box
sx={{
display: "flex",
ml: "auto",
}}
</>
)}
{!isMobile && (
<>
<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 }}>
<WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
</IconButton>
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>
<Typography
sx={{
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>
);
}
<LogoutIcon />
</IconButton>
</>
)}
</Box>
</Container>
);
}