feat: header burger

src/ui_kit/Header/HeaderFull.tsx

@@ -1,13 +1,22 @@
-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 isTablet = useMediaQuery(theme.breakpoints.down(1000));
+  const isMobile = useMediaQuery(theme.breakpoints.down(500));
 
   return (
     <Container
@@ -19,12 +28,21 @@ export default function HeaderFull() {
         display: "flex",
         height: "80px",
         alignItems: "center",
-                gap: "60px",
+        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",
@@ -40,12 +58,10 @@ export default function HeaderFull() {
           <NavMenuItem text="Меню 1" />
           <NavMenuItem text="Меню 2" />
         </Box>
-            <Box
-                sx={{
-                    display: "flex",
-                    ml: "auto",
-                }}
-            >
+      )}
+      <Box sx={{ display: isMobile ? "none" : "flex", ml: "auto" }}>
+        {!isTablet && (
+          <>
             <IconButton sx={{ p: 0 }}>
               <WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
             </IconButton>
@@ -56,15 +72,41 @@ export default function HeaderFull() {
                   lineHeight: "14px",
                   color: theme.palette.grey3.main,
                 }}
-                    >Мой баланс</Typography>
-                    <Typography variant="body2" color={theme.palette.brightPurple.main}>00.00 руб.</Typography>
+              >
+                Мой баланс
+              </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" }} />
+          </>
+        )}
+        {!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" }}
+              sx={{
+                ml: "20px",
+                bgcolor: "#F2F3F7",
+                borderRadius: "6px",
+                height: "36px",
+                width: "36px",
+              }}
             >
               <LogoutIcon />
             </IconButton>
+          </>
+        )}
       </Box>
     </Container>
   );