【Next.js】ハンバーガーメニューのアニメーションの作り方を解説

"use client";

  import { useEffect, useRef, useState } from "react";
  import { usePathname } from "next/navigation";

  const links = [
    { href: "#features", label: "機能" },
    { href: "#pricing", label: "料金" },
    { href: "#faq", label: "よくある質問" },
  ];

  export function MobileNav() {
    const [open, setOpen] = useState(false);
    const rootRef = useRef<HTMLDivElement>(null);
    const buttonRef = useRef<HTMLButtonElement>(null);
    const pathname = usePathname();

    // ページを移動したら閉じる
    useEffect(() => {
      setOpen(false);
    }, [pathname]);

    useEffect(() => {
      if (!open) return;
      const button = buttonRef.current;
      const prevOverflow = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      rootRef.current?.querySelector<HTMLElement>("nav a")?.focus();

      const onKeyDown = (e: KeyboardEvent) => {
        if (e.key === "Escape") {
          setOpen(false);
          return;
        }
        if (e.key !== "Tab" || !rootRef.current) return;
        const items = rootRef.current.querySelectorAll<HTMLElement>("button, nav a");
        const first = items[0];
        const last = items[items.length - 1];
        if (e.shiftKey && document.activeElement === first) {
          e.preventDefault();
          last.focus();
        } else if (!e.shiftKey && document.activeElement === last) {
          e.preventDefault();
          first.focus();
        }
      };
      window.addEventListener("keydown", onKeyDown);

      return () => {
        document.body.style.overflow = prevOverflow;
        window.removeEventListener("keydown", onKeyDown);
        button?.focus();
      };
    }, [open]);

    return (
      <div ref={rootRef} className="md:hidden">
        <button
          ref={buttonRef}
          type="button"
          aria-expanded={open}
          aria-controls="mobile-nav"
          aria-label={open ? "メニューを閉じる" : "メニューを開く"}
          onClick={() => setOpen((v) => !v)}
          className={`relative z-[60] grid h-10 w-10 place-items-center transition-colors ${open ? "text-white" : "text-zinc-900"}`}
        >
          <span aria-hidden className="relative block h-4 w-6">
            <span className={`absolute left-0 top-0 h-0.5 w-6 bg-current transition-transform duration-300 motion-reduce:transition-none ${open ? "translate-y-[7px] rotate-45" : ""}`} />
            <span className={`absolute left-0 top-[7px] h-0.5 w-6 bg-current transition-opacity duration-200 ${open ? "opacity-0" : ""}`} />
            <span className={`absolute bottom-0 left-0 h-0.5 w-6 bg-current transition-transform duration-300 motion-reduce:transition-none ${open ? "-translate-y-[7px] -rotate-45" : ""}`} />
          </span>
        </button>

        <div
          aria-hidden
          onClick={() => setOpen(false)}
          className={`fixed inset-0 z-40 bg-black/50 transition-opacity duration-300 ${open ? "opacity-100" : "pointer-events-none opacity-0"}`}
        />

        <nav
          id="mobile-nav"
          aria-label="メインメニュー"
          className={`fixed inset-y-0 right-0 z-50 flex h-dvh w-4/5 max-w-sm flex-col gap-6 bg-zinc-950 px-8 pt-24 text-lg text-white transition-[transform,visibility] duration-300 ease-out motion-reduce:transition-none ${open ? "visible translate-x-0" : "invisible translate-x-full"}`}
        >
          {links.map((link) => (
            <a key={link.href} href={link.href} onClick={() => setOpen(false)}>
              {link.label}
            </a>
          ))}
        </nav>
      </div>
    );
  }

import { AnimatePresence, motion } from "motion/react";

  // MobileNav の return 内で、背景とパネルをこれに置き換える
  <AnimatePresence>
    {open && (
      <motion.div
        key="overlay"
        aria-hidden
        onClick={() => setOpen(false)}
        className="fixed inset-0 z-40 bg-black/50"
        initial={{ opacity: 0 }}
        animate={{ opacity: 1 }}
        exit={{ opacity: 0 }}
      />
    )}
    {open && (
      <motion.nav
        key="panel"
        id="mobile-nav"
        aria-label="メインメニュー"
        className="fixed inset-y-0 right-0 z-50 flex h-dvh w-4/5 max-w-sm flex-col gap-6 bg-zinc-950 px-8 pt-24 text-lg text-white"
        initial={{ x: "100%" }}
        animate={{ x: 0 }}
        exit={{ x: "100%" }}
        transition={{ type: "tween", duration: 0.3, ease: "easeOut" }}
      >
        {links.map((link, i) => (
          <motion.a
            key={link.href}
            href={link.href}
            onClick={() => setOpen(false)}
            initial={{ opacity: 0, x: 16 }}
            animate={{ opacity: 1, x: 0 }}
            transition={{ delay: 0.12 + i * 0.05 }}
          >
            {link.label}
          </motion.a>
        ))}
      </motion.nav>
    )}
  </AnimatePresence>