{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "animated-mobile-navbar",
  "title": "Animated Mobile Navbar",
  "description": "A simple animated mobile navbar component.",
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "button"
  ],
  "files": [
    {
      "path": "registry/react/atlasui/animated-mobile-navbar.tsx",
      "content": "\"use client\";\n\nimport { createContext, useContext, useState } from \"react\";\n\nimport Link from \"next/link\";\nimport { usePathname } from \"next/navigation\";\n\nimport { XIcon } from \"lucide-react\";\nimport { AnimatePresence, motion } from \"motion/react\";\n\nimport { Button } from \"@/components/ui/button\";\n\ninterface AnimatedMobileNavbarContextProps {\n  open: boolean;\n  toggle: () => void;\n}\n\nconst AnimatedMobileNavbarContext =\n  createContext<AnimatedMobileNavbarContextProps | null>(null);\n\nexport const useAnimatedMobileNavbar = () => {\n  const context = useContext(AnimatedMobileNavbarContext);\n  if (!context) {\n    throw new Error(\n      \"useAnimatedMobileNavbar must be used within an AnimatedMobileNavbar\"\n    );\n  }\n  return context;\n};\n\nconst AnimatedMobileNavbar = ({ children }: { children: React.ReactNode }) => {\n  const [open, setOpen] = useState(false);\n  const toggle = () => setOpen((prev) => !prev);\n\n  return (\n    <AnimatedMobileNavbarContext.Provider value={{ open, toggle }}>\n      {children}\n    </AnimatedMobileNavbarContext.Provider>\n  );\n};\n\nconst AnimatedMobileNavbarTrigger = ({\n  children,\n}: {\n  children: React.ReactNode;\n}) => {\n  const { toggle } = useAnimatedMobileNavbar();\n\n  return <div onClick={toggle}>{children}</div>;\n};\n\nconst AnimatedMobileNavbarContent = ({\n  children,\n  side = \"top\",\n}: {\n  children: React.ReactNode;\n  side?: \"left\" | \"right\" | \"top\";\n}) => {\n  const { open, toggle } = useAnimatedMobileNavbar();\n\n  const menuVariants = {\n    initial: {\n      scaleY: side === \"top\" ? 0 : 1,\n      scaleX: side === \"left\" || side === \"right\" ? 0 : 1,\n      x: side === \"left\" ? \"-100%\" : side === \"right\" ? \"100%\" : 0,\n    },\n    animate: {\n      scaleY: 1,\n      scaleX: 1,\n      x: 0,\n      transition: {\n        duration: 0.5,\n        ease: (side === \"top\" ? [0.12, 0, 0.39, 0] : [0, 0.55, 0.45, 1]) as [\n          number,\n          number,\n          number,\n          number,\n        ],\n      },\n    },\n    exit: {\n      scaleY: side === \"top\" ? 0 : 1,\n      scaleX: side === \"left\" || side === \"right\" ? 0 : 1,\n      x: side === \"left\" ? \"-100%\" : side === \"right\" ? \"100%\" : 0,\n      transition: {\n        delay: 0.5,\n        duration: 0.5,\n        ease: (side === \"top\" ? [0.22, 1, 0.36, 1] : [0.61, 1, 0.88, 1]) as [\n          number,\n          number,\n          number,\n          number,\n        ],\n      },\n    },\n  };\n\n  const containerVariants = {\n    initial: {\n      transition: {\n        staggerChildren: 0.09,\n        staggerDirection: -1,\n      },\n    },\n    open: {\n      transition: {\n        delay: 0.3,\n        staggerChildren: 0.09,\n        staggerDirection: 1,\n      },\n    },\n  };\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <motion.div\n          className={`bg-primary-foreground fixed top-0 left-0 z-50 h-screen w-full origin-top px-5 py-10 ${\n            side === \"left\"\n              ? \"origin-left\"\n              : side === \"right\"\n                ? \"origin-right\"\n                : \"origin-top\"\n          }`}\n          variants={menuVariants}\n          initial=\"initial\"\n          animate=\"animate\"\n          exit=\"exit\"\n        >\n          <Button\n            variant=\"ghost\"\n            size=\"icon\"\n            onClick={toggle}\n            className=\"text-foreground absolute top-5 right-5\"\n          >\n            <XIcon />\n          </Button>\n\n          <motion.div\n            className=\"mt-16 flex flex-col items-center justify-center space-y-8\"\n            variants={containerVariants}\n            initial=\"initial\"\n            animate=\"open\"\n            exit=\"initial\"\n          >\n            {children}\n          </motion.div>\n        </motion.div>\n      )}\n    </AnimatePresence>\n  );\n};\n\nconst AnimatedMobileNavbarLink = ({\n  href,\n  label,\n  onClick,\n}: {\n  href: string;\n  label: string;\n  onClick?: () => void;\n}) => {\n  const pathname = usePathname();\n  const isActive =\n    (pathname?.includes(href) && href.length > 1) || pathname === href;\n\n  const linkVariants = {\n    initial: {\n      y: \"30vh\",\n      transition: {\n        duration: 0.5,\n        ease: [0.37, 0, 0.36, 1] as [number, number, number, number],\n      },\n    },\n    open: {\n      y: 0,\n      transition: {\n        duration: 0.7,\n        ease: [0, 0.55, 0.45, 1] as [number, number, number, number],\n      },\n    },\n  };\n\n  return (\n    <div className=\"overflow-hidden\">\n      <motion.div variants={linkVariants}>\n        <Link\n          href={href}\n          className={`hover:text-primary text-muted-foreground relative mx-4 text-lg font-bold uppercase hover:after:scale-x-125 ${\n            isActive ? \"text-primary\" : \"text-muted-foreground\"\n          } after:bg-primary after:absolute after:-bottom-0.5 after:left-0 after:h-px after:w-full after:scale-x-0 after:duration-300 after:content-['']`}\n          onClick={onClick}\n        >\n          {label}\n        </Link>\n      </motion.div>\n    </div>\n  );\n};\n\nexport {\n  AnimatedMobileNavbar,\n  AnimatedMobileNavbarTrigger,\n  AnimatedMobileNavbarContent,\n  AnimatedMobileNavbarLink,\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}