fix(front) Добавлен бургер меню , изменена верстка
This commit is contained in:
@@ -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,
|
||||
};
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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" />
|
||||
|
||||
@@ -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)} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user