83 lines
2.9 KiB
TypeScript
83 lines
2.9 KiB
TypeScript
type propsType = {
|
|
clicked: boolean;
|
|
setClicked: React.Dispatch<React.SetStateAction<boolean>>;
|
|
};
|
|
export default function MobileMenu({ clicked, setClicked }: propsType) {
|
|
return (
|
|
<div className="flex">
|
|
<div
|
|
className={`fixed right-0 ${clicked ? "right-0" : "right-[-1000px]"} top-[98px] z-30 flex h-full w-full bg-slate-950 opacity-20`}
|
|
onClick={() => setClicked(false)}
|
|
></div>
|
|
<div
|
|
className={`fixed left-0 top-0 z-40 flex h-full w-[250px] flex-col items-start gap-10 bg-[#fd6f00] ${clicked ? "left-0" : "left-[-260px]"} mobile-menu lg:left-[-260px]`}
|
|
>
|
|
<div className="z-50 flex w-full flex-wrap items-center justify-start bg-white px-3 py-6">
|
|
<div className="flex w-[50px]">
|
|
<img src={"/images/logo.svg"} className="w-full" alt="logo" />
|
|
</div>
|
|
<p className="ms-2 text-[20px] font-[900] text-[#FD6F00] sm:text-[23px] xl:ms-3 xl:text-[30px]">
|
|
Parsa Aghayi
|
|
</p>
|
|
</div>
|
|
<ul className="flex w-full flex-col">
|
|
<a
|
|
href="/#home"
|
|
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
|
|
onClick={(e) => {
|
|
setClicked(false);
|
|
}}
|
|
>
|
|
Home
|
|
</a>
|
|
<a
|
|
href="/#about-me"
|
|
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
|
|
onClick={(e) => {
|
|
setClicked(false);
|
|
}}
|
|
>
|
|
About Me
|
|
</a>
|
|
<a
|
|
href="/#services"
|
|
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
|
|
onClick={(e) => {
|
|
setClicked(false);
|
|
}}
|
|
>
|
|
Services
|
|
</a>
|
|
<a
|
|
href="/#projects"
|
|
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
|
|
onClick={(e) => {
|
|
setClicked(false);
|
|
}}
|
|
>
|
|
Projects
|
|
</a>
|
|
<a
|
|
href="/#testimonials"
|
|
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
|
|
onClick={(e) => {
|
|
setClicked(false);
|
|
}}
|
|
>
|
|
Testimonials
|
|
</a>
|
|
<a
|
|
href="/#contact"
|
|
className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
|
|
onClick={(e) => {
|
|
setClicked(false);
|
|
}}
|
|
>
|
|
Contact
|
|
</a>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|