35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
// 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;
|