parsa/parsaaghayi-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobileMenu updated

Browse Source
This commit is contained in:
parsa aghaei 2024-09-24 18:07:13 +03:30
parent 7e92bbc054
commit 6d2518b4ce
2 changed files with 72 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

136
src/app/_components/mobile-menu/page.tsx
View File

@ -4,73 +4,79 @@ type propsType = {
};
export default function MobileMenu({ clicked, setClicked }: propsType) {
return (
<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]"} lg:left-[-260px] mobile-menu`}
>
<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 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>
<p className="ms-2 text-[20px] font-[900] text-[#FD6F00] sm:text-[23px] xl:ms-3 xl:text-[30px]">
Parsa Aghayi
</p>
<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>
<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>
);
}

2
src/app/_components/services/page.tsx
View File

@ -60,7 +60,7 @@ export default function Services() {
service!.title
)}
</h3>
<p className="w-full text-[14px] text-justify font-[400] text-black xl:text-[20px]">
<p className="w-full text-justify text-[14px] font-[400] text-black xl:text-[20px]">
{loading ? (
<Skeleton containerClassName={"w-full"} height={60} />
) : (