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

mobileMenu added

Browse Source
This commit is contained in:
parsa aghaei 2024-09-24 17:48:41 +03:30
parent f047cd70e0
commit 7e92bbc054
7 changed files with 151 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
public/images/icons/burger-menu.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 18L20 18" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
<path d="M4 12L20 12" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
<path d="M4 6L20 6" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 468 B

5
public/images/icons/close-square.svg Normal file
View File

@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path opacity="0.4" d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2Z" fill="#292D32"/>
<path d="M13.0594 12.0001L15.3594 9.70011C15.6494 9.41011 15.6494 8.93011 15.3594 8.64011C15.0694 8.35011 14.5894 8.35011 14.2994 8.64011L11.9994 10.9401L9.69937 8.64011C9.40937 8.35011 8.92937 8.35011 8.63938 8.64011C8.34938 8.93011 8.34938 9.41011 8.63938 9.70011L10.9394 12.0001L8.63938 14.3001C8.34938 14.5901 8.34938 15.0701 8.63938 15.3601C8.78938 15.5101 8.97937 15.5801 9.16937 15.5801C9.35937 15.5801 9.54937 15.5101 9.69937 15.3601L11.9994 13.0601L14.2994 15.3601C14.4494 15.5101 14.6394 15.5801 14.8294 15.5801C15.0194 15.5801 15.2094 15.5101 15.3594 15.3601C15.6494 15.0701 15.6494 14.5901 15.3594 14.3001L13.0594 12.0001Z" fill="#292D32"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

43
src/app/_components/burger-button/page.tsx Normal file
View File

@ -0,0 +1,43 @@
"use client";
import Image from "next/image";
import React, { useState } from "react";
import MobileMenu from "../mobile-menu/page";
export default function BurgerButton() {
const [clicked, setClicked] = useState(false);
return (
<>
{clicked ? (
<button
className="flex items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[16px] font-[600] text-[#fff] lg:hidden xl:text-[20px]"
onClick={() => setClicked(!clicked)}
>
<Image
src={"/images/icons/close-square.svg"}
width={25}
height={25}
alt="close burger-menu svg"
className="cursor-pointer burger-menu"
/>
</button>
) : (
<button
className="flex items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[16px] font-[600] text-[#fff] lg:hidden xl:text-[20px]"
onClick={() => setClicked(!clicked)}
>
<Image
src={"/images/icons/burger-menu.svg"}
width={25}
height={25}
alt="burger-menu svg"
className="burger-menu"
onClick={() => setClicked(!clicked)}
/>
</button>
)}
<MobileMenu clicked={clicked} setClicked={setClicked} />
</>
);
}

76
src/app/_components/mobile-menu/page.tsx Normal file
View File

@ -0,0 +1,76 @@
type propsType = {
clicked: boolean;
setClicked: React.Dispatch<React.SetStateAction<boolean>>;
};
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>
<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>
);
}

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] font-[400] text-black xl:text-[20px]">
<p className="w-full text-[14px] text-justify font-[400] text-black xl:text-[20px]">
{loading ? (
<Skeleton containerClassName={"w-full"} height={60} />
) : (

14
src/app/globals.css
View File

@ -250,7 +250,7 @@ html {
cursor: zoom-in;
}
.svg-hover{
.svg-hover {
transition: all ease-in-out 123ms;
-webkit-transition: -webkit-filter 123ms ease-in-out;
scale: 1;
@ -259,6 +259,16 @@ html {
scale: 1.05;
filter: brightness(0) saturate(100%) invert(46%) sepia(59%) saturate(3359%)
hue-rotate(6deg) brightness(103%) contrast(104%);
transition: all ease-in-out 123ms;
transition: all ease-in-out 123ms;
-webkit-transition: -webkit-filter 123ms ease-in-out;
}
.burger-menu {
filter: brightness(0) saturate(100%) invert(100%) sepia(6%) saturate(0%)
hue-rotate(115deg) brightness(108%) contrast(108%);
}
.mobile-menu {
opacity: 0.95;
transition: all ease-in-out 0.5s;
}

11
src/app/layout.tsx
View File

@ -2,6 +2,8 @@ import type { Metadata } from "next";
import localFont from "next/font/local";
import "./globals.css";
import Image from "next/image";
import BurgerButton from "./_components/burger-button/page";
import MobileMenu from "./_components/mobile-menu/page";
const geistSans = localFont({
src: "./../../public/fonts/Mikhak-v3.2/Variable/Mikhak[DSTY,KSHD,wght].woff2",
@ -82,9 +84,12 @@ export default function RootLayout({
Contact
</a>
</ul>
<button className="flex items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[16px] font-[600] text-[#fff] xl:text-[20px]">
Download CV
</button>
<div className="flex gap-1">
<button className="flex items-center justify-center whitespace-nowrap rounded-md bg-[#FD6F00] px-4 py-2 text-[16px] font-[600] text-[#fff] xl:text-[20px]">
Download CV
</button>
<BurgerButton />
</div>
</div>
<div className="main my-10 flex w-full justify-center">{children}</div>