From 7e92bbc054b78985bf0663ea6d1f2d4d2ab10716 Mon Sep 17 00:00:00 2001 From: parsa aghaei Date: Tue, 24 Sep 2024 17:48:41 +0330 Subject: [PATCH] mobileMenu added --- public/images/icons/burger-menu.svg | 6 ++ public/images/icons/close-square.svg | 5 ++ src/app/_components/burger-button/page.tsx | 43 ++++++++++++ src/app/_components/mobile-menu/page.tsx | 76 ++++++++++++++++++++++ src/app/_components/services/page.tsx | 2 +- src/app/globals.css | 14 +++- src/app/layout.tsx | 11 +++- 7 files changed, 151 insertions(+), 6 deletions(-) create mode 100644 public/images/icons/burger-menu.svg create mode 100644 public/images/icons/close-square.svg create mode 100644 src/app/_components/burger-button/page.tsx create mode 100644 src/app/_components/mobile-menu/page.tsx diff --git a/public/images/icons/burger-menu.svg b/public/images/icons/burger-menu.svg new file mode 100644 index 0000000..9ddd45b --- /dev/null +++ b/public/images/icons/burger-menu.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/public/images/icons/close-square.svg b/public/images/icons/close-square.svg new file mode 100644 index 0000000..8124b59 --- /dev/null +++ b/public/images/icons/close-square.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/app/_components/burger-button/page.tsx b/src/app/_components/burger-button/page.tsx new file mode 100644 index 0000000..d6eb56c --- /dev/null +++ b/src/app/_components/burger-button/page.tsx @@ -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 ? ( + + + + ) : ( + + )} + + + ); +} diff --git a/src/app/_components/mobile-menu/page.tsx b/src/app/_components/mobile-menu/page.tsx new file mode 100644 index 0000000..4eac164 --- /dev/null +++ b/src/app/_components/mobile-menu/page.tsx @@ -0,0 +1,76 @@ +type propsType = { + clicked: boolean; + setClicked: React.Dispatch>; +}; +export default function MobileMenu({ clicked, setClicked }: propsType) { + return ( +
+
+
+ logo +
+

+ Parsa Aghayi +

+
+ +
+ ); +} diff --git a/src/app/_components/services/page.tsx b/src/app/_components/services/page.tsx index baa4aee..fe7df6d 100644 --- a/src/app/_components/services/page.tsx +++ b/src/app/_components/services/page.tsx @@ -60,7 +60,7 @@ export default function Services() { service!.title )} -

+

{loading ? ( ) : ( diff --git a/src/app/globals.css b/src/app/globals.css index f374031..20216e2 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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; +} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 89b3b2c..9b1d6ed 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -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 - +

+ + +
{children}