81 lines
2.3 KiB
TypeScript
81 lines
2.3 KiB
TypeScript
import { ComponentProps } from "react";
|
|
|
|
import headerImg from "@/assets/images/header-img.gif";
|
|
import titleImg from "@/assets/images/title-img.svg";
|
|
import ahogeImg from "@/assets/images/furina-ahoge.svg";
|
|
import { Link, useLocation } from "react-router-dom";
|
|
import { cn } from "@/utility/utils";
|
|
|
|
const AppBar = () => {
|
|
return (
|
|
<header className="w-full bg-[#111a21] shadow">
|
|
<div className="mx-auto max-w-5xl md:px-4 pt-6 md:py-4 flex flex-col md:flex-row items-center gap-4">
|
|
<Link
|
|
to="/"
|
|
className="flex flex-col md:flex-row items-center gap-2 md:gap-4"
|
|
>
|
|
<img
|
|
src={headerImg}
|
|
alt="Furina gif by u/Quit-Creative"
|
|
className="h-12 md:h-16"
|
|
/>
|
|
<img src={titleImg} alt="Furina" className="h-6 md:h-10" />
|
|
</Link>
|
|
|
|
<Navbar>
|
|
<NavbarItem path="/" title="Home" />
|
|
<NavbarItem path="/pat-pat" title="Pat Furina" />
|
|
<NavbarItem path="/treasures" title="Treasures‧₊˚" />
|
|
<NavbarItem path="/toodle" title="Toodle-oo~" />
|
|
</Navbar>
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|
|
|
|
const Navbar = ({ children }: ComponentProps<"div">) => {
|
|
return (
|
|
<nav className="md:flex-1 self-stretch md:self-center flex items-center px-2 md:px-0 md:justify-end md:gap-5 overflow-x-auto md:overflow-x-hidden">
|
|
{children}
|
|
</nav>
|
|
);
|
|
};
|
|
|
|
type NavbarItemProps = {
|
|
path: string;
|
|
title: string;
|
|
isExact?: boolean;
|
|
};
|
|
|
|
const NavbarItem = ({ path, title, isExact = true }: NavbarItemProps) => {
|
|
const { pathname } = useLocation();
|
|
const isActive = isExact ? pathname === path : pathname.startsWith(path);
|
|
|
|
return (
|
|
<Link
|
|
to={path}
|
|
className="group flex flex-shrink-0 items-center px-2 md:py-4 first:ml-auto last:mr-auto md:first:ml-0 md:last:mr-0"
|
|
>
|
|
<img
|
|
src={ahogeImg}
|
|
alt="ahoge"
|
|
className={cn(
|
|
"h-4 md:h-6 group-hover:-scale-x-100 transition-transform",
|
|
isActive ? "-scale-x-100" : ""
|
|
)}
|
|
/>
|
|
|
|
<p
|
|
className={cn(
|
|
"text-white ml-2 md:ml-4 py-2 md:py-0 border-b-2 md:border-dotted group-hover:border-primary-500 border-transparent transition-all",
|
|
isActive ? "border-primary-500 md:border-white" : ""
|
|
)}
|
|
>
|
|
{title}
|
|
</p>
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
export default AppBar;
|