64 lines
2.4 KiB
TypeScript
64 lines
2.4 KiB
TypeScript
import { Button, IconButton } from "../"
|
|
import {
|
|
XMarkIcon,
|
|
HomeIcon,
|
|
MagnifyingGlassIcon,
|
|
LightBulbIcon,
|
|
RocketLaunchIcon,
|
|
QuestionMarkCircleIcon,
|
|
ChatBubbleLeftIcon,
|
|
} from "@heroicons/react/24/outline"
|
|
|
|
export const MobileSidebar: React.FC<{ isOpen: boolean; onClose: () => void }> = ({ isOpen, onClose }) => (
|
|
<div
|
|
className={`fixed inset-0 z-50 bg-gray-600 bg-opacity-75 transition-opacity ${
|
|
isOpen ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0"
|
|
}`}
|
|
onClick={onClose}
|
|
>
|
|
<div
|
|
className={`transform transition-transform ease-in-out ${
|
|
isOpen ? "translate-x-0 duration-500" : "-translate-x-full duration-500"
|
|
}`}
|
|
>
|
|
{/* Add your sidebar content here */}
|
|
<div className="h-screen w-64 flex-col bg-blue-500 p-4">
|
|
{/* Sidebar content goes here */}
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="test-lg font-['Bienetresocial'] font-normal uppercase leading-5 text-white">SKILLTENSOR</h1>
|
|
<IconButton onClick={onClose} variant="light">
|
|
<XMarkIcon className="h-8 w-8" />
|
|
</IconButton>
|
|
</div>
|
|
<div className="mt-12 flex flex-col gap-8">
|
|
<Button variant="ghost" className="flex justify-start text-white">
|
|
<HomeIcon className="mr-2 h-4 w-4" />
|
|
<p>Home</p>
|
|
</Button>
|
|
<Button variant="ghost" className="flex hidden justify-start text-white">
|
|
<MagnifyingGlassIcon className="mr-2 h-4 w-4" />
|
|
<p>Topics</p>
|
|
</Button>
|
|
<Button variant="ghost" className="flex hidden justify-start text-white">
|
|
<LightBulbIcon className="mr-2 h-4 w-4" />
|
|
<p>Why Us</p>
|
|
</Button>
|
|
<Button variant="ghost" className="flex hidden justify-start text-white">
|
|
<RocketLaunchIcon className="mr-2 h-4 w-4" />
|
|
<p>Features</p>
|
|
</Button>
|
|
<Button variant="ghost" className="flex hidden justify-start text-white">
|
|
<QuestionMarkCircleIcon className="mr-2 h-4 w-4" />
|
|
<p>FAQs</p>
|
|
</Button>
|
|
<Button variant="ghost" className="flex justify-start text-white">
|
|
<ChatBubbleLeftIcon className="mr-2 h-4 w-4" />
|
|
<p>ChatBot</p>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
export default MobileSidebar
|