Animated Mobile Navbar

1"use client";
2 
3import { createContext, useContext, useState } from "react";
4 
5import Link from "next/link";
6import { usePathname } from "next/navigation";
7 
8import { XIcon } from "lucide-react";
9import { AnimatePresence, motion } from "motion/react";
10 
11import { Button } from "@/components/ui/button";
12 
13interface AnimatedMobileNavbarContextProps {
14  open: boolean;
15  toggle: () => void;
16}
17 
18const AnimatedMobileNavbarContext =
19  createContext<AnimatedMobileNavbarContextProps | null>(null);
20 
21export const useAnimatedMobileNavbar = () => {
22  const context = useContext(AnimatedMobileNavbarContext);
23  if (!context) {
24    throw new Error(
25      "useAnimatedMobileNavbar must be used within an AnimatedMobileNavbar"
26    );
27  }
28  return context;
29};
30 
31const AnimatedMobileNavbar = ({ children }: { children: React.ReactNode }) => {
32  const [open, setOpen] = useState(false);
33  const toggle = () => setOpen((prev) => !prev);
34 
35  return (
36    <AnimatedMobileNavbarContext.Provider value={{ open, toggle }}>
37      {children}
38    </AnimatedMobileNavbarContext.Provider>
39  );
40};
41 
42const AnimatedMobileNavbarTrigger = ({
43  children,
44}: {
45  children: React.ReactNode;
46}) => {
47  const { toggle } = useAnimatedMobileNavbar();
48 
49  return <div onClick={toggle}>{children}</div>;
50};
51 
52const AnimatedMobileNavbarContent = ({
53  children,
54  side = "top",
55}: {
56  children: React.ReactNode;
57  side?: "left" | "right" | "top";
58}) => {
59  const { open, toggle } = useAnimatedMobileNavbar();
60 
61  const menuVariants = {
62    initial: {
63      scaleY: side === "top" ? 0 : 1,
64      scaleX: side === "left" || side === "right" ? 0 : 1,
65      x: side === "left" ? "-100%" : side === "right" ? "100%" : 0,
66    },
67    animate: {
68      scaleY: 1,
69      scaleX: 1,
70      x: 0,
71      transition: {
72        duration: 0.5,
73        ease: (side === "top" ? [0.12, 0, 0.39, 0] : [0, 0.55, 0.45, 1]) as [
74          number,
75          number,
76          number,
77          number,
78        ],
79      },
80    },
81    exit: {
82      scaleY: side === "top" ? 0 : 1,
83      scaleX: side === "left" || side === "right" ? 0 : 1,
84      x: side === "left" ? "-100%" : side === "right" ? "100%" : 0,
85      transition: {
86        delay: 0.5,
87        duration: 0.5,
88        ease: (side === "top" ? [0.22, 1, 0.36, 1] : [0.61, 1, 0.88, 1]) as [
89          number,
90          number,
91          number,
92          number,
93        ],
94      },
95    },
96  };
97 
98  const containerVariants = {
99    initial: {
100      transition: {
101        staggerChildren: 0.09,
102        staggerDirection: -1,
103// … truncated