add anchor / delete linter error / small revision

src/components/Header.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import {
   Box,
   Typography,
@@ -7,38 +7,62 @@ import {
   List,
   ListItem,
   Button,
+  Link,
 } 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";
-
+import { scrollToAnchor } from "../utils/scrollUtils";
 const Header = () => {
   const { isMobile } = useResponsive();
   const [drawerOpen, setDrawerOpen] = useState(false);
   const [feedbackOpen, setFeedbackOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
 
   const menuItems = [
-    "О нас",
-    "Калькулятор",
-    "Отзывы",
-    "Контакты",
-    "В наличии",
-    "Команда",
-    "Доставленные авто",
-    "Этапы работы",
+    { title: "О нас", anchor: "#about" },
+    { title: "Калькулятор", anchor: "#calculator" },
+    { title: "Отзывы", anchor: "#reviews" },
+    { title: "Контакты", anchor: "#contacts" },
+    { title: "В наличии", anchor: "#available" },
+    { title: "Команда", anchor: "#team" },
+    { title: "Доставленные авто", anchor: "#delivered" },
+    { title: "Этапы работы", anchor: "#stages" },
+    { title: " ", anchor: "#main"},
   ];
 
-  const toggleDrawer = (open) => (event) => {
+  // Отслеживание скролла
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 10) {
+        setScrolled(true);
+      } else {
+        setScrolled(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  const toggleDrawer = (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
     if (
       event.type === "keydown" &&
-      (event.key === "Tab" || event.key === "Shift")
+      ((event as React.KeyboardEvent).key === "Tab" || (event as React.KeyboardEvent).key === "Shift")
     ) {
       return;
     }
     setDrawerOpen(open);
   };
 
+    // Используем глобальную функцию из utils
+    const handleScrollToAnchor = (anchor: string) => {
+      scrollToAnchor(anchor, setDrawerOpen, isMobile);
+    };
+
   return (
     <>
       <Box
@@ -53,16 +77,29 @@ const Header = () => {
           userSelect: "none",
           color: "white",
           padding: isMobile ? "0 4vw" : 0,
+          position: "fixed",
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 1000,
+          transition: "all 0.3s ease",
+          boxShadow: scrolled ? "0 2px 10px rgba(0,0,0,0.2)" : "none",
         }}
       >
-        <img
+        <Box
+          component="img"
           src={logo}
           alt="logo"
-          style={{
-            width: isMobile ? "10vw" : "7vw",
-            height: isMobile ? "10vw" : "7vw",
+          onClick={() => handleScrollToAnchor("#main")}
+          sx={{
+            width: isMobile ? "17vw" : "9vw",
+            height: isMobile ? "17vw" : "9vw",
+            cursor: "pointer",
+            "&:hover": { scale: 1.1 },
+            transition: "all 0.4s ease",
           }}
-        />
+        >
+        </Box>
 
         {isMobile ? (
           <Box
@@ -93,45 +130,57 @@ const Header = () => {
         ) : (
           // Desktop menu
           menuItems.map((item, index) => (
-            <Typography
+            <Link
               key={index}
+              component="button"
+              onClick={() => handleScrollToAnchor(item.anchor)}
+              underline="none"
               sx={{
                 fontFamily: "Unbounded",
-                fontSize: "1vw",
+                fontSize: "1.2vw",
                 cursor: "pointer",
+                color: "white",
+                "&:hover": { color: "#C27664" },
+                transition: "all 0.3s ease",
               }}
             >
-              {item}
-            </Typography>
+              {item.title}
+            </Link>
           ))
         )}
       </Box>
 
+      {/* Пустой блок для компенсации фиксированного хедера */}
+      <Box sx={{ height: isMobile ? "15vw" : "10vw" }} />
+
       {/* Мобильное меню */}
       <Drawer
         anchor="right"
-        open={isMobile && drawerOpen}
+        open={drawerOpen}
         onClose={toggleDrawer(false)}
       >
         <Box
-          sx={{ width: "70vw", bgcolor: "#2D2D2D", height: "100%" }}
+          sx={{ width: "58vw", bgcolor: "#2D2D2D", height: "100%" }}
           role="presentation"
-          onClick={toggleDrawer(false)}
-          onKeyDown={toggleDrawer(false)}
         >
           <List>
             {menuItems.map((item, index) => (
-              <ListItem key={index}>
+              <ListItem 
+                key={index} 
+                onClick={() => handleScrollToAnchor(item.anchor)}
+                sx={{ cursor: "pointer" }}
+              >
                 <Typography
                   sx={{
                     fontFamily: "Unbounded",
                     fontSize: "4vw",
                     color: "white",
                     padding: "2vw 0",
-                    cursor: "pointer",
+                    "&:hover": { color: "#C27664" },
+                    transition: "color 0.3s ease",
                   }}
                 >
-                  {item}
+                  {item.title}
                 </Typography>
               </ListItem>
             ))}
@@ -139,8 +188,7 @@ const Header = () => {
         </Box>
       </Drawer>
 
-      {/* Форма обратной связи */}
-      <Feedback open={feedbackOpen} onClose={() => setFeedbackOpen(false)} />
+      <Feedback open={feedbackOpen} onClose={() => setFeedbackOpen(false)} handleScrollToAnchor={handleScrollToAnchor} />
     </>
   );
 };