Deforest6342/fishfish
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
LeonG11
2026-06-09 17:59:29 +03:00
parent f325b6b31f
commit 21f7e75a63
6 changed files with 116 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Footer.jsx → frontend/src/components/FooterDesktop.jsx
+5 -2
View File
@@ -1,12 +1,15 @@
import { useNavigate } from "react-router-dom";
import siteLogo from "../assets/Исходники/logo.png";
export default function Footer() {
export default function FooterDesktop() {
const navigate = useNavigate();
return (
<footer className="bg-light-blue w-full h-27.5 px-16 flex items-center justify-between ">
<button className="flex flex-col items-center text-lg tracking-widest text-gold" onClick={()=>navigate("/")}>
<button
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" />
<span>FISH FISH</span>
</button>
frontend/src/components/FooterMobile.jsx
+23
View File
@@ -0,0 +1,23 @@
import { useNavigate } from "react-router-dom";
import siteLogo from "../assets/Исходники/logo.png";
export default function FooterMobile() {
const navigate = useNavigate();
return (
<footer className="bg-light-blue w-full h-27.5 px-6 flex items-center justify-between ">
<button
className="flex flex-col items-center 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-light-gray hover:text-gold transition-colors duration-200 text-sm">
+7 (800) 900-20-20
</button>
</div>
</footer>
);
}
frontend/src/components/Header.jsx → frontend/src/components/HeaderDesktop.jsx
+5 -2
View File
@@ -1,12 +1,15 @@
import { useNavigate } from "react-router-dom";
import siteLogo from "../assets/Исходники/logo.png";
export default function Header() {
export default function HeaderDesktop() {
const navigate = useNavigate();
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" onClick={()=>navigate("/")}>
<button
className="flex flex-col items-center gap-2 text-lg tracking-widest text-gold"
onClick={() => navigate("/")}
>
<img src={siteLogo} alt="Лого" className="w-12 h-12 object-contain" />
<span>FISH FISH</span>
</button>
frontend/src/components/HeaderMobile.jsx
+64
View File
@@ -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>
);
}
frontend/src/components/PageLayout.jsx
+16 -4
View File
@@ -1,12 +1,24 @@
import Footer from "./Footer";
import Header from "./Header";
import FooterDesktop from "./FooterDesktop";
import HeaderDesktop from "./HeaderDesktop";
import FooterMobile from "./FooterMobile";
import HeaderMobile from "./HeaderMobile";
export default function PageLayout({ children }) {
return (
<body className="min-h-screen flex flex-col w-full">
<Header />
<div className="hidden lg:block">
<HeaderDesktop />
</div>
<div className="block lg:hidden">
<HeaderMobile />
</div>
{children}
<Footer />
<div className="hidden lg:block">
<FooterDesktop />
</div>
<div className="block lg:hidden">
<FooterMobile />
</div>
</body>
);
}
frontend/src/pages/AddItem.jsx
+3 -4
View File
@@ -1,6 +1,6 @@
import { useState } from "react";
import * as api from "../api"; // Импортируем все функции из api/index.js
import Header from "../components/Header";
import PageLayout from "../components/PageLayout";
export default function Dashboard() {
const [formData, setFormData] = useState({
@@ -39,8 +39,7 @@ export default function Dashboard() {
};
return (
<div>
<Header />
<PageLayout>
<div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border">
<form onSubmit={handleSubmit} className="space-y-4">
<div>
@@ -109,6 +108,6 @@ export default function Dashboard() {
</div>
</form>
</div>
</div>
</PageLayout>
);
}