"use client" import { useState } from "react" import { motion, MotionConfig } from "framer-motion" import { X, Menu } from "lucide-react" import Link from "next/link" export default function ExpandableNav() { const [isOpen, setIsOpen] = useState(false) const containerVariants = { closed: { scale: 0.95, height: "52px", transition: { duration: 0.4, type: "spring", bounce: 0, }, }, open: { scale: 1, height: "auto", transition: { duration: 0.4, type: "spring", bounce: 0, }, }, } const contentVariants = { closed: { opacity: 0, scale: 0.8, transition: { duration: 0.2, }, }, open: { opacity: 1, scale: 1, transition: { type: "spring", bounce: 0, duration: 0.4, delay: 0.05, }, }, } const logoVariants = { closed: { scale: 1, }, open: { scale: 1, transition: { duration: 0.2, }, }, } const closeButtonVariants = { closed: { scale: 1, }, open: { scale: 1, transition: { duration: 0.2, }, }, } const links = [ { label: "Home", href: "/", }, { label: "About", href: "/", }, { label: "Contact", href: "/", }, ] const handleMenuOpenClose = () => { setIsOpen(!isOpen) } return ( {/* Logo/Trigger */}

Prompt

{links.map((link) => ( {link.label} ))}

{/* Close Button */} { isOpen ? : } {/* Navigation Content */} {/* Main Navigation Grid */}

Prompt

Organize

Prompting

Fast

Earn

Connect

Nice Prompt

Nice AI

EMAIL

TWITTER

INSTAGRAM

Expandable Nav

Prompt

Organize

Prompting

Fast

Earn

Connect

Nice Prompt

Nice AI

EMAIL

TWITTER

INSTAGRAM

An app that makes you money

Prompt

Organize

Prompting

Fast

Earn

Connect

Nice Prompt

Nice AI

EMAIL

TWITTER

INSTAGRAM

An app that makes you money