Merge pull request #29 from sitcon-tw/feature/mobile-layout

feat:finished mobile ver.

app/(cfp)/_components/navbar.tsx

@@ -1,26 +1,87 @@
+"use client";
 import Image from "next/image";
 import Link from "next/link";
-import Logo from "@/public/assets/logo.png";
+import Logo from "@/public/assets/logo_black.svg";
+import { motion, AnimatePresence } from "framer-motion";
+import { useState } from "react";
+import { pre } from "framer-motion/client";
 
 export default function Navbar() {
+  const [showMenu, setShowMenu] = useState(false);
+  const menuItems = [
+    { link: "/", label: "首頁" },
+    { link: "/theme", label: "年會主題" },
+    { link: "/normal", label: "一般議程徵稿" },
+    { link: "/undefined", label: "開放式議程徵稿" },
+    { link: "/poster", label: "海報徵稿" },
+  ];
   return (
-    <nav className="sticky left-0 right-0 top-0 z-20 flex justify-center bg-blue">
+    <nav className="sticky left-0 right-0 top-0 z-20 flex justify-center bg-light-brown">
       <div className="w-full max-w-[840px] desktop:max-w-[1120px]">
-        <ul className="flex w-full items-center justify-between p-4 max-[750px]:justify-center">
+        <ul className="relative flex w-full items-center justify-between p-4 max-[750px]:justify-center">
           <Image
             src={Logo}
             alt="logo"
             className="-translate-y-1"
             width={130}
             height={65}
           />
-          <ul className="flex items-center justify-end gap-8 text-light-brown max-[750px]:hidden">
-            <NavbarItem link="/">首頁</NavbarItem>
-            <NavbarItem link="/theme">年會主題</NavbarItem>
-            <NavbarItem link="/normal">一般議程徵稿</NavbarItem>
-            <NavbarItem link="/undefined">開放式議程徵稿</NavbarItem>
-            <NavbarItem link="/poster">海報徵稿</NavbarItem>
+          <ul className="flex items-center justify-end gap-8 text-black max-[750px]:hidden">
+            {menuItems.map(({ link, label }) => (
+              <NavbarItem key={link} link={link}>
+                <p>{label}</p>
+              </NavbarItem>
+            ))}
           </ul>
+
+          <AnimatePresence mode="wait">
+            <motion.div
+              className="absolute right-4 justify-self-end md:hidden"
+              onClick={() => setShowMenu((prev) => !prev)}
+              initial={{ rotate: 0 }}
+              animate={{
+                rotate: showMenu ? 360 : 0,
+              }}
+              exit={{ rotate: 0 }}
+              transition={{ duration: 0.3, ease: "easeInOut" }}
+            >
+              <motion.span
+                key={showMenu ? "close" : "menu"}
+                initial={{ scale: 0.8, opacity: 0 }}
+                animate={{ scale: 1, opacity: 1 }}
+                exit={{ scale: 0.8, opacity: 0 }}
+                transition={{ duration: 0.2 }}
+                className="material-symbols-outlined !text-[48px]"
+              >
+                {showMenu ? "close" : "menu"}
+              </motion.span>
+            </motion.div>
+          </AnimatePresence>
+          <AnimatePresence>
+            {showMenu && (
+              <motion.ul
+                initial={{ opacity: 0, y: -30 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -20 }}
+                transition={{ duration: 0.2 }}
+                className="absolute top-[64px] z-10 flex h-[100vh] w-full flex-col items-end gap-16 border-t border-black bg-light-brown p-6 text-h2 font-bold shadow-lg md:hidden"
+              >
+                {menuItems.map(({ link, label }, index) => (
+                  <NavbarItem key={link} link={link}>
+                    <motion.p
+                      initial={{ opacity: 0, x: -40 }}
+                      animate={{ opacity: 1, x: 0 }}
+                      transition={{ duration: 0.2, delay: 0.2 * (index + 1) }}
+                      className="border-b border-black p-2 text-blue"
+                      onClick={() => setShowMenu((prev) => !prev)}
+                    >
+                      {label}
+                    </motion.p>
+                  </NavbarItem>
+                ))}
+              </motion.ul>
+            )}
+          </AnimatePresence>
         </ul>
       </div>
     </nav>