design from figma / edit header and mainpage / adaptive on mobile

src/components/Header.tsx

@@ -1,105 +1,146 @@
-import React from 'react';
-import { 
-  AppBar, 
-  Toolbar, 
-  Typography, 
-  Button, 
-  Box, 
-  Container,
+import React, { useState } from "react";
+import {
+  Box,
+  Typography,
   IconButton,
-  Stack
-} from '@mui/material';
-import { styled } from '@mui/material/styles';
-import PhoneIcon from '@mui/icons-material/Phone';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import TelegramIcon from '@mui/icons-material/Telegram';
-import WhatsAppIcon from '@mui/icons-material/WhatsApp';
-
-// Стилизованная кнопка для "Оставить заявку"
-const RequestButton = styled(Button)(({ theme }) => ({
-  backgroundColor: '#c22d1a',
-  color: 'white',
-  borderRadius: '4px',
-  padding: '10px 20px',
-  '&:hover': {
-    backgroundColor: '#a42517',
-  },
-}));
-
-// Стилизованный логотип
-const Logo = styled('img')({
-  height: '40px',
-  marginRight: '10px',
-});
+  Drawer,
+  List,
+  ListItem,
+  Button,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import logo from "../assets/icon/autobro.png";
+import { useResponsive } from "../theme/useResponsive";
+import Feedback from "./Feedback";
 
 const Header = () => {
+  const { isMobile } = useResponsive();
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [feedbackOpen, setFeedbackOpen] = useState(false);
+
+  const menuItems = [
+    "О нас",
+    "Калькулятор",
+    "Отзывы",
+    "Контакты",
+    "В наличии",
+    "Команда",
+    "Доставленные авто",
+    "Этапы работы",
+  ];
+
+  const toggleDrawer = (open) => (event) => {
+    if (
+      event.type === "keydown" &&
+      (event.key === "Tab" || event.key === "Shift")
+    ) {
+      return;
+    }
+    setDrawerOpen(open);
+  };
+
   return (
     <>
-      <AppBar position="static" color="default" elevation={0} sx={{ backgroundColor: 'white' }}>
-        <Container maxWidth="xl">
-          <Toolbar disableGutters>
-            {/* Логотип и текст */}
-            <Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1 }}>
-              <Logo src="/logo.svg" alt="Логотип" />
-              <Typography variant="body2" color="text.primary" sx={{ maxWidth: 250, lineHeight: 1.2 }}>
-                Автомобили из Европы, США, Китая, и Кореи
-              </Typography>
-            </Box>
-            
-            {/* Время работы */}
-            <Box sx={{ display: 'flex', alignItems: 'center', mx: 2 }}>
-              <AccessTimeIcon sx={{ mr: 1, color: 'primary.main' }} />
-              <Typography variant="body2">
-                Ежедневно: с 9:00 до 20:00
-              </Typography>
-            </Box>
-            
-            {/* Номер телефона */}
-            <Box sx={{ display: 'flex', alignItems: 'center', mx: 2 }}>
-              <PhoneIcon sx={{ mr: 1, color: 'primary.main' }} />
-              <Box>
-                <Typography variant="body2" color="text.secondary">
-                  Номер телефона
-                </Typography>
-                <Typography variant="body1" fontWeight="bold">
-                  +7 927 853 3979
-                </Typography>
-              </Box>
-            </Box>
-            
-            {/* Кнопка заявки */}
-            <RequestButton variant="contained">
-              Оставить заявку
-            </RequestButton>
-            
-            {/* Социальные сети */}
-            <Stack direction="row" spacing={1} sx={{ ml: 2 }}>
-              <IconButton sx={{ border: '1px solid #e0e0e0' }}>
-                <img src="/vk-icon.svg" alt="VK" width="24" height="24" />
-              </IconButton>
-              <IconButton sx={{ border: '1px solid #e0e0e0' }}>
-                <WhatsAppIcon color="success" />
-              </IconButton>
-              <IconButton sx={{ border: '1px solid #e0e0e0' }}>
-                <TelegramIcon color="primary" />
-              </IconButton>
-            </Stack>
-          </Toolbar>
-        </Container>
-      </AppBar>
-      
-      {/* Навигационное меню */}
-      <Box sx={{ borderBottom: 1, borderColor: 'divider', backgroundColor: 'white' }}>
-        <Container maxWidth="xl">
-          <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
-            {['О нас', 'В наличии', 'Этапы работы', 'Отзывы', 'Калькулятор', 'Команда', 'Доставленные авто', 'Контакты'].map((item) => (
-              <Button key={item} sx={{ color: 'text.primary', py: 1.5 }}>
-                {item}
-              </Button>
-            ))}
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: isMobile ? "15vw" : "10vw",
+          gap: "2vw",
+          fontFamily: "Unbounded",
+          bgcolor: "#2D2D2D",
+          userSelect: "none",
+          color: "white",
+          padding: isMobile ? "0 4vw" : 0,
+        }}
+      >
+        <img
+          src={logo}
+          alt="logo"
+          style={{
+            width: isMobile ? "10vw" : "7vw",
+            height: isMobile ? "10vw" : "7vw",
+          }}
+        />
+
+        {isMobile ? (
+          <Box
+            sx={{ marginLeft: "auto", display: "flex", alignItems: "center" }}
+          >
+            <Button
+              variant="contained"
+              onClick={() => setFeedbackOpen(true)}
+              sx={{
+                bgcolor: "#C27664",
+                color: "white",
+                fontSize: "2.5vw",
+                padding: "1.5vw 3vw",
+                marginRight: "3vw",
+                textTransform: "none",
+                borderRadius: "3vw",
+                fontWeight: "light",
+                fontFamily: "Unbounded",
+                "&:hover": { bgcolor: "#945B4D" },
+              }}
+            >
+              Оставьте заявку
+            </Button>
+            <IconButton onClick={toggleDrawer(true)} sx={{ color: "white" }}>
+              <MenuIcon sx={{ fontSize: "7vw" }} />
+            </IconButton>
           </Box>
-        </Container>
+        ) : (
+          // Desktop menu
+          menuItems.map((item, index) => (
+            <Typography
+              key={index}
+              sx={{
+                fontFamily: "Unbounded",
+                fontSize: "1vw",
+                cursor: "pointer",
+              }}
+            >
+              {item}
+            </Typography>
+          ))
+        )}
       </Box>
+
+      {/* Мобильное меню */}
+      <Drawer
+        anchor="right"
+        open={isMobile && drawerOpen}
+        onClose={toggleDrawer(false)}
+      >
+        <Box
+          sx={{ width: "70vw", bgcolor: "#2D2D2D", height: "100%" }}
+          role="presentation"
+          onClick={toggleDrawer(false)}
+          onKeyDown={toggleDrawer(false)}
+        >
+          <List>
+            {menuItems.map((item, index) => (
+              <ListItem key={index}>
+                <Typography
+                  sx={{
+                    fontFamily: "Unbounded",
+                    fontSize: "4vw",
+                    color: "white",
+                    padding: "2vw 0",
+                    cursor: "pointer",
+                  }}
+                >
+                  {item}
+                </Typography>
+              </ListItem>
+            ))}
+          </List>
+        </Box>
+      </Drawer>
+
+      {/* Форма обратной связи */}
+      <Feedback open={feedbackOpen} onClose={() => setFeedbackOpen(false)} />
     </>
   );
 };