fix(front) Сделан header footer адаптивные для мобильной и десктоп версии

2026-06-09 17:59:29 +03:00
parent f325b6b31f
commit 21f7e75a63
6 changed files with 116 additions and 12 deletions
@@ -0,0 +1,64 @@
+import { useNavigate } from "react-router-dom";
+import siteLogo from "../assets/Исходники/logo.png";
+
+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>
+
+      <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>
+  );
+}