Navigation menu

navigation.tsx

import { RxHamburgerMenu } from 'react-icons/rx';
import { motion, useCycle, AnimatePresence } from 'framer-motion';

const sidebar = {
  open: (height = 1000) => ({
    clipPath: `circle(${height * 2 + 200}px at 40px 40px)`,
    transition: {
      type: 'spring',
      stiffness: 20,
      restDelta: 2,
    },
  }),
  closed: {
    clipPath: 'circle(30px at 40px 40px)',
    transition: {
      delay: 0.5,
      type: 'spring',
      stiffness: 400,
      damping: 40,
    },
  },
};

export const Navigation = () => {
  const [isOpen, toggleOpen] = useCycle(false, true);

  return (
    <>
      <div className="flex md:w-full md:justify-between items-center px-6 py-3">
        <button className="flex text-white" onClick={() => toggleOpen()}>
          <RxHamburgerMenu size={42} />
        </button>
        <div className="md:flex hidden flex-row items-center justify-center gap-3">
          <button className="flex h-fit bg-transparent border-white border-[3px] text-white text-lg font-black tracking-wider cursor-pointer rounded-full px-4 py-2 uppercase">
            Hacer Pedido
          </button>
          <button className="md:flex hidden h-fit bg-red-600 items-center justify-center text-white text-lg font-black tracking-wider cursor-pointer rounded-full px-5 py-3 uppercase">
            Reservar
          </button>
        </div>
      </div>
      <AnimatePresence>
        <motion.div
          initial={false}
          animate={isOpen ? 'open' : 'closed'}
          variants={sidebar}
          className={`${
            isOpen ? 'flex' : 'hidden'
          } absolute w-screen h-screen bg-yellow-500 z-50 top-0 left-0`}
        >
          <div className="flex px-8 py-6">
            <button className="flex text-white" onClick={() => toggleOpen()}>
              <RxHamburgerMenu size={42} />
            </button>
          </div>
        </motion.div>
      </AnimatePresence>
    </>
  );
};