"use client"; import React, { useContext, useEffect, useState } from "react"; import { usePathname } from "next/navigation"; import { motion } from "framer-motion"; import Link from "next/link"; import Drawer from "react-modern-drawer"; import "react-modern-drawer/dist/index.css"; import { Icon } from "@iconify/react/dist/iconify.js"; const navItems = [ { title: "Home", href: "", }, { title: "About", href: "", }, { title: "Booking", href: "", }, { title: "Blog", href: "", }, ]; function Page() { const pathname = usePathname(); const [isOpen, setIsOpen] = React.useState(false); const [open, setOpen] = useState(false); const toggleDrawer = () => { setIsOpen((prevState) => !prevState); }; const listVariants = { closed: { x: "100vh", }, opened: { x: 0, transition: { type: "tween", when: "beforeChildren", staggerChildren: 0.2, }, }, }; const listItemVatiants = { closed: { x: -10, opacity: 0, }, opened: { x: 0, opacity: 1, }, }; return ( <>

Logo

{navItems.map((item, index) => ( {item.title} ))}

{open && ( {navItems.map((item, index) => ( setOpen((prev: any) => !prev)} > {item?.title} ))}

)}

{ e.preventDefault(); }} className="flex flex-col flex-1 text-sm text-gray-400 py-8 md:px-16 px-8 gap-8 rounded-xl bg-white border-gray-200 " >

Reach Out to Us

First Name

Last Name

Phone

Address

Services

); } export default Page;

Effortless Navigation for Every Device

Animated Navbar

Installation