feat: navabar

src/routes/-/Navigation/Navigation.tsx

@@ -1,97 +1,198 @@
-import { Link, useMatchRoute } from "@tanstack/react-router";
-import { motion } from "motion/react";
+import { useMatchRoute, useNavigate } from "@tanstack/react-router";
 import { useTranslation } from "react-i18next";
+import { AnimatePresence } from "motion/react";
 
 import GlassSurface from "@components/surface/GlassSurface";
 
 import classes from "./Navigation.module.css";
+import ShopRoute from "@/routes/shop";
+import ApiaryRoute from "@/routes/apiary";
+import GameRoute from "@/routes/game";
+import CashdeskRoute from "@/routes/cashdesk";
+import RouletteRoute from "@/routes/roulette";
+import TasksRoute from "@/routes/tasks";
+import EarningsRoute from "@/routes/earnings";
+import { useCallback, useEffect, useRef, useState } from "react";
 
-const ENTRANCE_DELAYS = [0.2, 0.1, 0, 0.1, 0.2];
+import shopIcon from "./assets/shop.svg";
+import apiaryIcon from "./assets/apiary.svg";
+import gameIcon from "./assets/game.svg";
+import cashdeskIcon from "./assets/cashdesk.svg";
+import menuIcon from "./assets/menu.svg";
+import rouletteIcon from "./assets/roulette.svg";
+import tasksIcon from "./assets/tasks.svg";
+import earningsIcon from "./assets/earnings.svg";
 
-const SPRING_ENTRANCE = { type: "spring" as const, stiffness: 400, damping: 20 };
-const SPRING_HEIGHT = { type: "spring" as const, stiffness: 500, damping: 25 };
+const BAR_HEIGHT = 64;
+const ACTIVE_BAR_HEIGHT = 74;
+const OFFSCREEN_BAR_OFFSET = 20;
 
-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 },
+const NAV_ITEMS = [
+  { key: "nav.shop", route: ShopRoute, icon: shopIcon },
+  { key: "nav.apiary", route: ApiaryRoute, icon: apiaryIcon },
+  { key: "nav.game", route: GameRoute, icon: gameIcon },
+  { key: "nav.cashdesk", route: CashdeskRoute, icon: cashdeskIcon },
+  { key: "nav.menu", isMenu: true, icon: menuIcon },
 ];
+const HORIZONTAL_ENTRANCE_DELAYS = [0.2, 0.1, 0, 0.1, 0.2];
 
-function IconPlaceholder() {
-  return <div className={classes.iconPlaceholder} />;
-}
+const MENU_ITEMS = [
+  { key: "nav.roulette", route: RouletteRoute, icon: rouletteIcon, delay: 0.1 },
+  { key: "nav.tasks", route: TasksRoute, icon: tasksIcon, delay: 0.05 },
+  { key: "nav.earnings", route: EarningsRoute, icon: earningsIcon, delay: 0 },
+];
 
 type BarProps = {
   labelKey: string;
+  icon: string;
   active: boolean;
   entranceDelay: number;
+  onClick: () => void;
 };
 
-function NavBar({ labelKey, active, entranceDelay }: BarProps) {
+function NavBar({ labelKey, icon, active, entranceDelay, onClick }: BarProps) {
+  const { t } = useTranslation();
+  const isInitial = useRef(true);
+
+  useEffect(() => {
+    isInitial.current = false;
+  }, []);
+
+  return (
+    <GlassSurface
+      className={classes.bar}
+      initial={{ translateY: ACTIVE_BAR_HEIGHT + OFFSCREEN_BAR_OFFSET }}
+      animate={{
+        translateY: OFFSCREEN_BAR_OFFSET,
+        height: (active ? ACTIVE_BAR_HEIGHT : BAR_HEIGHT) + OFFSCREEN_BAR_OFFSET,
+      }}
+      transition={{
+        type: "spring" as const,
+        stiffness: 400,
+        damping: 20,
+        delay: isInitial.current ? entranceDelay : 0,
+      }}
+      whileTap={{ scale: 0.95 }}
+      onClick={onClick}
+    >
+      <div className={classes.safeContent}>
+        <img src={icon} className={classes.icon} alt="" />
+        <span
+          className={
+            active
+              ? `${classes.label} ${classes.labelActive}`
+              : `${classes.label} ${classes.labelInactive}`
+          }
+        >
+          {t(labelKey)}
+        </span>
+      </div>
+    </GlassSurface>
+  );
+}
+
+type MenuBarProps = {
+  labelKey: string;
+  icon: string;
+  delay: number;
+  onClick: () => void;
+};
+
+const MENU_SPRING = { type: "spring" as const, stiffness: 400, damping: 20 };
+
+function MenuBar({ labelKey, icon, delay, onClick }: MenuBarProps) {
   const { t } = useTranslation();
 
   return (
-    <motion.div
-      className={classes.barWrapper}
-      initial={{ translateY: "100%" }}
-      animate={{ translateY: "0%" }}
-      transition={{ ...SPRING_ENTRANCE, delay: entranceDelay }}
+    <GlassSurface
+      className={classes.menuBar}
+      variants={{
+        hidden: { translateX: ACTIVE_BAR_HEIGHT + OFFSCREEN_BAR_OFFSET },
+        visible: {
+          translateX: OFFSCREEN_BAR_OFFSET,
+          transition: { ...MENU_SPRING, delay: delay },
+        },
+        exit: {
+          translateX: ACTIVE_BAR_HEIGHT + OFFSCREEN_BAR_OFFSET + 10,
+          transition: { ...MENU_SPRING, delay: delay },
+        },
+      }}
+      initial="hidden"
+      animate="visible"
+      exit="exit"
+      whileTap={{ scale: 0.95 }}
+      onClick={onClick}
     >
-      <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>
+      <div className={classes.menuBarContent}>
+        <img src={icon} className={classes.icon} alt="" />
+        <span className={`${classes.label} ${classes.labelInactive}`}>{t(labelKey)}</span>
+      </div>
+    </GlassSurface>
   );
 }
 
 export default function Navigation() {
   const matchRoute = useMatchRoute();
+  const navigate = useNavigate();
+  const [menuOpen, setMenuOpen] = useState(false);
+  const navRef = useRef<HTMLDivElement>(null);
+
+  const handleOutsideClick = useCallback((e: MouseEvent) => {
+    if (navRef.current && !navRef.current.contains(e.target as Node)) {
+      setMenuOpen(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (menuOpen) {
+      document.addEventListener("click", handleOutsideClick);
+      return () => document.removeEventListener("click", handleOutsideClick);
+    }
+  }, [menuOpen, handleOutsideClick]);
 
   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) {
+    <div ref={navRef}>
+      <div className={classes.menuOverlay}>
+        <AnimatePresence>
+          {menuOpen &&
+            MENU_ITEMS.map((item) => (
+              <MenuBar
+                key={item.key}
+                labelKey={item.key}
+                icon={item.icon}
+                delay={item.delay}
+                onClick={() => {
+                  setMenuOpen(false);
+                  navigate({ to: item.route.to });
+                }}
+              />
+            ))}
+        </AnimatePresence>
+      </div>
+      <nav className={classes.navigation}>
+        {NAV_ITEMS.map((item, index) => {
+          const active = item.isMenu ? menuOpen : Boolean(matchRoute({ to: item.route!.to }));
           return (
-            <div key={item.key} className={classes.barContainer}>
-              {bar}
-            </div>
+            <NavBar
+              key={item.key}
+              labelKey={item.key}
+              icon={item.icon}
+              active={active}
+              entranceDelay={HORIZONTAL_ENTRANCE_DELAYS[index]}
+              onClick={
+                item.isMenu
+                  ? () => setMenuOpen((v) => !v)
+                  : active
+                    ? () => {}
+                    : () => {
+                        setMenuOpen(false);
+                        navigate({ to: item.route!.to });
+                      }
+              }
+            />
           );
-        }
-
-        return (
-          <Link key={item.key} to={item.route} className={classes.barContainer}>
-            {bar}
-          </Link>
-        );
-      })}
-    </nav>
+        })}
+      </nav>
+    </div>
   );
 }