From 5fed1bd16d734dd2fe3c872332d93e044c434759 Mon Sep 17 00:00:00 2001
From: LeonG11 <kkacanov198@gmail.com>
Date: Wed, 10 Jun 2026 11:30:38 +0300
Subject: [PATCH] =?UTF-8?q?fix(front)=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2?=
 =?UTF-8?q?=D0=BB=D0=B5=D0=BD=20=D0=B1=D1=83=D1=80=D0=B3=D0=B5=D1=80=20?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=BD=D1=8E=20,=20=D0=B8=D0=B7=D0=BC=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=B2=D0=B5=D1=80=D1=81=D1=82=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/BurgerButton.jsx  |  23 +++++
 frontend/src/components/BurgerClose.jsx   |  21 ++++
 frontend/src/components/BurgerMenu.jsx    |  62 +++++++++++
 frontend/src/components/HeaderDesktop.jsx |   2 +-
 frontend/src/components/HeaderMobile.jsx  | 120 ++++++++++++----------
 frontend/src/index.css                    |   1 +
 6 files changed, 175 insertions(+), 54 deletions(-)
 create mode 100644 frontend/src/components/BurgerButton.jsx
 create mode 100644 frontend/src/components/BurgerClose.jsx
 create mode 100644 frontend/src/components/BurgerMenu.jsx

diff --git a/frontend/src/components/BurgerButton.jsx b/frontend/src/components/BurgerButton.jsx
new file mode 100644
index 0000000..4a9772f
--- /dev/null
+++ b/frontend/src/components/BurgerButton.jsx
@@ -0,0 +1,23 @@
+import PropTypes from "prop-types";
+export default function BurgerButton({ onClick }) {
+  return (
+    <button onClick={onClick}>
+      <svg
+        width="26"
+        height="14"
+        viewBox="0 0 26 14"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className="pr-1"
+      >
+        <path d="M0 1H26" stroke="#B78A61" strokeWidth="2" />
+        <path d="M0 7H26" stroke="#B78A61" strokeWidth="2" />
+        <path d="M0 13H26" stroke="#B78A61" strokeWidth="2" />
+      </svg>
+    </button>
+  );
+}
+
+BurgerButton.propTypes = {
+  onClick: PropTypes.func.isRequired,
+};
diff --git a/frontend/src/components/BurgerClose.jsx b/frontend/src/components/BurgerClose.jsx
new file mode 100644
index 0000000..16c140a
--- /dev/null
+++ b/frontend/src/components/BurgerClose.jsx
@@ -0,0 +1,21 @@
+export default function BurgerClose() {
+  return (
+    <svg
+      width="18"
+      height="18"
+      viewBox="0 0 18 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_305_391)">
+        <path d="M1 17L17 1.00003" stroke="#B78A61" strokeWidth="2" />
+        <path d="M1 1L17 17" stroke="#B78A61" strokeWidth="2" />
+      </g>
+      <defs>
+        <clipPath id="clip0_305_391">
+          <rect width="18" height="18" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/frontend/src/components/BurgerMenu.jsx b/frontend/src/components/BurgerMenu.jsx
new file mode 100644
index 0000000..86b9c36
--- /dev/null
+++ b/frontend/src/components/BurgerMenu.jsx
@@ -0,0 +1,62 @@
+import { useNavigate } from "react-router-dom";
+import BurgerClose from "./BurgerClose";
+
+export default function BurgerMenu({ isOpen, onClose }) {
+  const navigate = useNavigate();
+  return (
+    <div
+      onClick={onClose}
+      className={`fixed inset-0 bg-black/60 backdrop-blur-sm z-40 transition-all duration-300 ease-in-out ${isOpen ? "visible" : "invisible"}
+      `}
+    >
+      <div
+        className={`fixed top-0 left-0 bottom-0 w-4/5 max-w-sm bg-dark-blue p-6 z-50 flex flex-col transition-transform duration-300 ease-in-out ${isOpen ? "translate-x-0" : "-translate-x-full"
+          }`}
+      >
+        <div className="flex justify-start pt-12 px-6">
+          <button onClick={onClose}>
+            <BurgerClose />
+          </button>
+        </div>
+        <div className="flex flex-col text-lg font-medium text-white gap-6 transition-color duration-200 hover:text-gold justify-center items-center">
+          <button
+            className="hover:text-gold duration-200 transition uppercase"
+            onClick={() => navigate("/about")}
+          >
+            fish fish
+          </button>
+          <svg
+            width="4"
+            height="4"
+            viewBox="0 0 4 4"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle cx="2" cy="2" r="2" fill="white" />
+          </svg>
+          <button
+            className="hover:text-gold duration-200 transition uppercase"
+            onClick={() => navigate("/shop")}
+          >
+            ассортимент
+          </button>
+          <svg
+            width="4"
+            height="4"
+            viewBox="0 0 4 4"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <circle cx="2" cy="2" r="2" fill="white" />
+          </svg>
+          <button
+            className="hover:text-gold duration-200 transition uppercase"
+            onClick={() => navigate("/about")}
+          >
+            контакты
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/src/components/HeaderDesktop.jsx b/frontend/src/components/HeaderDesktop.jsx
index b9ebb40..373f559 100644
--- a/frontend/src/components/HeaderDesktop.jsx
+++ b/frontend/src/components/HeaderDesktop.jsx
@@ -7,7 +7,7 @@ export default function HeaderDesktop() {
   return (
     <header className="w-full h-27.5 px-16 flex items-center justify-between ">
       <button
-        className="flex flex-col items-center gap-2 text-lg tracking-widest text-gold"
+        className="flex flex-col items-center text-lg tracking-widest text-gold"
         onClick={() => navigate("/")}
       >
         <img src={siteLogo} alt="Лого" className="w-12 h-12 object-contain" />
diff --git a/frontend/src/components/HeaderMobile.jsx b/frontend/src/components/HeaderMobile.jsx
index 89cb688..cd37407 100644
--- a/frontend/src/components/HeaderMobile.jsx
+++ b/frontend/src/components/HeaderMobile.jsx
@@ -1,64 +1,78 @@
 import { useNavigate } from "react-router-dom";
 import siteLogo from "../assets/Исходники/logo.png";
+import BurgerButton from "./BurgerButton";
+import { useState } from "react";
+import BurgerMenu from "./BurgerMenu";
 
 export default function HeaderMobile() {
   const navigate = useNavigate();
 
-  return (
-    <header className="w-full h-27.5 px-6 flex items-center justify-between ">
-      <button
-        className="flex flex-col items-center gap-2 text-sm tracking-widest text-gold"
-        onClick={() => navigate("/")}
-      >
-        <img src={siteLogo} alt="Лого" className="w-12 h-12 object-contain" />
-        <span>FISH FISH</span>
-      </button>
+  const [isOpen, setIsOpen] = useState(false);
 
-      <div className="flex items-center">
-        <button className="text-slate-200 hover:text-gold transition-colors duration-200 pr-7">
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
+  return (
+    <>
+      <header className="w-full h-27.5 px-6 flex items-center justify-between ">
+        <div className="flex items-center gap-1">
+          <BurgerButton isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} />
+          <button
+            className="flex flex-col items-center text-sm tracking-widest text-gold"
+            onClick={() => navigate("/")}
           >
-            <circle
-              cx="12"
-              cy="7.5"
-              r="4"
-              stroke="currentColor"
-              strokeLinecap="square"
-              strokeLinejoin="round"
+            <img
+              src={siteLogo}
+              alt="Лого"
+              className="w-12 h-12 object-contain"
             />
-            <path
-              d="M21 21H3C3 17.6863 5.68629 15 9 15H15C18.3137 15 21 17.6863 21 21Z"
-              stroke="currentColor"
-              strokeLinecap="square"
-            />
-          </svg>
-        </button>
-        <button className="text-slate-200 hover:text-gold transition-colors duration-200">
-          <svg
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M16.2654 8H7.73459C6.73929 8 5.89545 8.73186 5.75469 9.71716L4.32612 19.7172C4.154 20.922 5.08892 22 6.30602 22H17.694C18.9111 22 19.846 20.922 19.6739 19.7172L18.2453 9.71716C18.1046 8.73186 17.2607 8 16.2654 8Z"
-              stroke="currentColor"
-            />
-            <path
-              d="M9 10V5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V10"
-              stroke="currentColor"
-            />
-            <circle cx="9" cy="10" r="1" fill="currentColor" />
-            <circle cx="15" cy="10" r="1" fill="currentColor" />
-          </svg>
-        </button>
-      </div>
-    </header>
+            <span>FISH FISH</span>
+          </button>
+        </div>
+        <div className="flex items-center">
+          <button className="text-slate-200 hover:text-gold transition-colors duration-200 pr-7">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                cx="12"
+                cy="7.5"
+                r="4"
+                stroke="currentColor"
+                strokeLinecap="square"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M21 21H3C3 17.6863 5.68629 15 9 15H15C18.3137 15 21 17.6863 21 21Z"
+                stroke="currentColor"
+                strokeLinecap="square"
+              />
+            </svg>
+          </button>
+          <button className="text-slate-200 hover:text-gold transition-colors duration-200">
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M16.2654 8H7.73459C6.73929 8 5.89545 8.73186 5.75469 9.71716L4.32612 19.7172C4.154 20.922 5.08892 22 6.30602 22H17.694C18.9111 22 19.846 20.922 19.6739 19.7172L18.2453 9.71716C18.1046 8.73186 17.2607 8 16.2654 8Z"
+                stroke="currentColor"
+              />
+              <path
+                d="M9 10V5C9 3.89543 9.89543 3 11 3H13C14.1046 3 15 3.89543 15 5V10"
+                stroke="currentColor"
+              />
+              <circle cx="9" cy="10" r="1" fill="currentColor" />
+              <circle cx="15" cy="10" r="1" fill="currentColor" />
+            </svg>
+          </button>
+        </div>
+      </header>
+      <BurgerMenu isOpen={isOpen} onClose={() => setIsOpen(false)} />
+    </>
   );
 }
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 9906936..7c57422 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -7,6 +7,7 @@
   --color-light-blue: #1c3751;
   --color-light-gray: #d2cccc;
   --font-sans: "Ubuntu", sans-serif;
+  --color-dark-blue: #051b26;
 }
 
 @layer base {