everydayserieswebsite/components/Navbar/MobileMenu.tsx

// MobileMenu.tsx
import React from 'react';
import { FaAngleDown } from "react-icons/fa";

interface MobileMenuProps {
  show: boolean;
  toggle: () => void;
}

const MobileMenu: React.FC<MobileMenuProps> = ({ show, toggle }) => {
  return (
    <div className={`fixed top-0 left-0 w-full h-screen bg-[#080E12] text-white bg-opacity-90 transition-transform duration-300 ${show ? 'translate-x-0' : '-translate-x-full'} z-50`}>
      <div className="flex justify-end p-4">
        <button onClick={toggle} className="text-white">Close</button>
      </div>
      <ul className="flex flex-col items-center space-y-4 mt-20">
        <li className="flex items-center cursor-pointer">
          Product <FaAngleDown className='ml-2' />
        </li>
        <li className="flex items-center cursor-pointer">
          Solutions <FaAngleDown className='ml-2' />
        </li>
        <li className="flex items-center cursor-pointer">
          Pricing
        </li>
        <li className="flex items-center cursor-pointer">
          Resources <FaAngleDown className='ml-2' />
        </li>
      </ul>
    </div>
  );
};

export default MobileMenu;