126 lines
5.1 KiB
JavaScript
126 lines
5.1 KiB
JavaScript
import { useState } from "react";
|
|
import { useLocation } from "react-router-dom";
|
|
// import { disablePageScroll, enablePageScroll } from "scroll-lock";
|
|
import Button from "../Button/index.tsx";
|
|
import Logo from "../Logo/index.js";
|
|
import Image from "../Image/index.tsx";
|
|
|
|
// 简化版导航数据
|
|
const navigation = [
|
|
{ id: "0", title: "Features", url: "/features" },
|
|
{ id: "1", title: "Pricing", url: "/pricing" },
|
|
{ id: "2", title: "How to use", url: "/how-to-use" },
|
|
{ id: "3", title: "Roadmap", url: "/roadmap" },
|
|
];
|
|
|
|
const Header = () => {
|
|
const [openNavigation, setOpenNavigation] = useState(false);
|
|
const location = useLocation();
|
|
|
|
const toggleNavigation = () => {
|
|
setOpenNavigation(!openNavigation);
|
|
// if (openNavigation) {
|
|
// enablePageScroll();
|
|
// } else {
|
|
// disablePageScroll();
|
|
// }
|
|
};
|
|
|
|
const handleClick = () => {
|
|
setOpenNavigation(false);
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className={`fixed top-0 left-0 z-50 w-full ${
|
|
openNavigation ? "bg-n-8" : " bg-n-8/90 backdrop-blur-sm"
|
|
} border-b border-n-6 lg:bg-n-8/90 lg:backdrop-blur-sm`}
|
|
>
|
|
<div className="flex items-center h-[4.75rem] px-5 lg:h-[5.25rem] lg:px-7.5 xl:px-10">
|
|
<Logo className="xl:mr-8" />
|
|
<nav
|
|
className={`${
|
|
openNavigation ? "flex" : "hidden"
|
|
} fixed top-[4.8125rem] left-0 right-0 bottom-0 bg-n-8 lg:static lg:flex lg:mx-auto lg:bg-transparent`}
|
|
>
|
|
<div className="relative z-2 flex flex-col items-center justify-center m-auto lg:flex-row">
|
|
{navigation.map((item) => (
|
|
<a
|
|
className={`block relative font-code text-2xl uppercase text-n-1 transition-colors hover:text-color-1 px-6 py-6 md:py-8 lg:-mr-0.25 lg:text-xs lg:font-semibold ${
|
|
item.url === location.pathname
|
|
? "z-2 lg:text-n-1"
|
|
: "lg:text-n-1/50"
|
|
} lg:leading-5 lg:hover:text-n-1 xl:px-12`}
|
|
href={item.url}
|
|
onClick={handleClick}
|
|
key={item.id}
|
|
>
|
|
{item.title}
|
|
<div
|
|
className={`hidden absolute left-0 bottom-0 w-0.25 h-1.5 bg-n-6 lg:block ${
|
|
location.pathname === item.url
|
|
? "lg:h-3 lg:bg-n-1"
|
|
: ""
|
|
}`}
|
|
></div>
|
|
<div
|
|
className={`hidden absolute right-0 bottom-0 w-0.25 h-1.5 bg-n-6 lg:block ${
|
|
location.pathname === item.url
|
|
? "lg:h-3 lg:bg-n-1"
|
|
: ""
|
|
}`}
|
|
></div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</nav>
|
|
|
|
<a
|
|
className="button hidden mr-8 text-n-1/50 transition-colors hover:text-n-1 lg:block"
|
|
href="/login"
|
|
>
|
|
注册账号
|
|
</a>
|
|
<Button className="hidden lg:flex" href="/login">
|
|
登录
|
|
</Button>
|
|
<Button
|
|
className="ml-auto lg:hidden"
|
|
onClick={toggleNavigation}
|
|
px="px-3"
|
|
>
|
|
<svg
|
|
className="overflow-visible"
|
|
width="20"
|
|
height="12"
|
|
viewBox="0 0 20 12"
|
|
>
|
|
<rect
|
|
className="transition-all origin-center"
|
|
y={openNavigation ? "5" : "0"}
|
|
width="20"
|
|
height="2"
|
|
rx="1"
|
|
fill="white"
|
|
transform={`rotate(${openNavigation ? "45" : "0"})`}
|
|
/>
|
|
<rect
|
|
className="transition-all origin-center"
|
|
y={openNavigation ? "5" : "10"}
|
|
width="20"
|
|
height="2"
|
|
rx="1"
|
|
fill="white"
|
|
transform={`rotate(${
|
|
openNavigation ? "-45" : "0"
|
|
})`}
|
|
/>
|
|
</svg>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Header;
|