98 lines
2.6 KiB
TypeScript
98 lines
2.6 KiB
TypeScript
|
import { Link, useMatchRoute } from "@tanstack/react-router";
|
||
|
|
import { motion } from "motion/react";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
|
||
|
|
import GlassSurface from "@components/surface/GlassSurface";
|
||
|
|
|
||
|
|
import classes from "./Navigation.module.css";
|
||
|
|
|
||
|
|
const ENTRANCE_DELAYS = [0.2, 0.1, 0, 0.1, 0.2];
|
||
|
|
|
||
|
|
const SPRING_ENTRANCE = { type: "spring" as const, stiffness: 400, damping: 20 };
|
||
|
|
const SPRING_HEIGHT = { type: "spring" as const, stiffness: 500, damping: 25 };
|
||
|
|
|
||
|
|
type NavItem =
|
||
|
|
| { key: string; route: string; isMenu?: false }
|
||
|
|
| { key: string; route?: undefined; isMenu: true };
|
||
|
|
|
||
|
|
const NAV_ITEMS: NavItem[] = [
|
||
|
|
{ key: "nav.shop", route: "/shop/" },
|
||
|
|
{ key: "nav.apiary", route: "/apiary/" },
|
||
|
|
{ key: "nav.game", route: "/game/" },
|
||
|
|
{ key: "nav.cashdesk", route: "/cashdesk/" },
|
||
|
|
{ key: "nav.menu", isMenu: true },
|
||
|
|
];
|
||
|
|
|
||
|
|
function IconPlaceholder() {
|
||
|
|
return <div className={classes.iconPlaceholder} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
type BarProps = {
|
||
|
|
labelKey: string;
|
||
|
|
active: boolean;
|
||
|
|
entranceDelay: number;
|
||
|
|
};
|
||
|
|
|
||
|
|
function NavBar({ labelKey, active, entranceDelay }: BarProps) {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<motion.div
|
||
|
|
className={classes.barWrapper}
|
||
|
|
initial={{ translateY: "100%" }}
|
||
|
|
animate={{ translateY: "0%" }}
|
||
|
|
transition={{ ...SPRING_ENTRANCE, delay: entranceDelay }}
|
||
|
|
>
|
||
|
|
<GlassSurface
|
||
|
|
className={[classes.bar, active ? classes.barActive : classes.barInactive]}
|
||
|
|
animate={{ minHeight: active ? 74 : 64 }}
|
||
|
|
transition={SPRING_HEIGHT}
|
||
|
|
>
|
||
|
|
<div className={classes.safeContent}>
|
||
|
|
<IconPlaceholder />
|
||
|
|
<span
|
||
|
|
className={
|
||
|
|
active
|
||
|
|
? `${classes.label} ${classes.labelActive}`
|
||
|
|
: `${classes.label} ${classes.labelInactive}`
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{t(labelKey)}
|
||
|
|
</span>
|
||
|
|
<IconPlaceholder />
|
||
|
|
</div>
|
||
|
|
</GlassSurface>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function Navigation() {
|
||
|
|
const matchRoute = useMatchRoute();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<nav className={classes.navigation}>
|
||
|
|
{NAV_ITEMS.map((item, index) => {
|
||
|
|
const active = item.isMenu ? false : !!matchRoute({ to: item.route });
|
||
|
|
|
||
|
|
const bar = (
|
||
|
|
<NavBar labelKey={item.key} active={active} entranceDelay={ENTRANCE_DELAYS[index]} />
|
||
|
|
);
|
||
|
|
|
||
|
|
if (item.isMenu) {
|
||
|
|
return (
|
||
|
|
<div key={item.key} className={classes.barContainer}>
|
||
|
|
{bar}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Link key={item.key} to={item.route} className={classes.barContainer}>
|
||
|
|
{bar}
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</nav>
|
||
|
|
);
|
||
|
|
}
|