From 9a467b9602e5049a5f1f4e31cf86da71518c5720 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Wed, 2 Oct 2024 15:41:23 +0330
Subject: [PATCH] menu is responsive now

---
 .../components/burger-button/burgerButton.tsx |  3 +-
 .../blog/components/button/button.tsx         | 10 ++-
 .../blog/components/header/header.tsx         | 29 +++++---
 .../blog/components/header/navLinks.tsx       |  8 ++-
 .../components/mobile-menu/mobileMenu.tsx     | 69 +++++++++----------
 src/app/(routes)/blog/layout.tsx              |  2 +-
 6 files changed, 67 insertions(+), 54 deletions(-)

diff --git a/src/app/(routes)/blog/components/burger-button/burgerButton.tsx b/src/app/(routes)/blog/components/burger-button/burgerButton.tsx
index 0427aab..2212b4a 100644
--- a/src/app/(routes)/blog/components/burger-button/burgerButton.tsx
+++ b/src/app/(routes)/blog/components/burger-button/burgerButton.tsx
@@ -2,13 +2,14 @@
 import Image from "next/image";
 import React, { useState } from "react";
 import MobileMenu from "../mobile-menu/mobileMenu";
+import Button from "../button/button";
 
 export default function BurgerButton() {
   const [clicked, setClicked] = useState(false);
   return (
     <>
       <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] select-none"
+        className="flex select-none items-center justify-center whitespace-nowrap rounded-md bg-blog-purple px-2 py-1 sm:px-2 sm:py-2 md:hidden text-[16px] font-[600] text-[#fff]"
         onClick={() => setClicked(!clicked)}
       >
         <Image
diff --git a/src/app/(routes)/blog/components/button/button.tsx b/src/app/(routes)/blog/components/button/button.tsx
index 27b7edd..24604a0 100644
--- a/src/app/(routes)/blog/components/button/button.tsx
+++ b/src/app/(routes)/blog/components/button/button.tsx
@@ -2,12 +2,18 @@ type buttonPropsType = {
   type?: "outline" | "curve" | "curveOutline";
   color: "red" | "purple" | "yellow" | "green" | "background";
   text: string;
+  className?: string;
 };
 
-export default function Button({ type, color, text }: buttonPropsType) {
+export default function Button({
+  type,
+  color,
+  text,
+  className,
+}: buttonPropsType) {
   return (
     <button
-      className={`flex items-center justify-center rounded-[10px] px-[24px] py-[12px] text-[18px] font-[600] shadow-md ${
+      className={`${className} flex items-center justify-center rounded-[10px] px-[24px] py-[12px] text-[18px] font-[600] shadow-md ${
         color === "red"
           ? type === "outline"
             ? "rounded-[10px] border-[2px] border-blog-red text-blog-red"
diff --git a/src/app/(routes)/blog/components/header/header.tsx b/src/app/(routes)/blog/components/header/header.tsx
index 1c373d0..694c060 100644
--- a/src/app/(routes)/blog/components/header/header.tsx
+++ b/src/app/(routes)/blog/components/header/header.tsx
@@ -3,29 +3,36 @@ import React from "react";
 import Button from "../button/button";
 import { NavLinks } from "./navLinks";
 import Link from "next/link";
+import BurgerButton from "../burger-button/burgerButton";
 
 export default function Header() {
   return (
     <div className="fixed z-50 flex w-full items-center justify-center bg-blog-background py-10">
-      <div className="top-10 flex w-[1280px] items-center justify-between">
+      <div className="top-10 flex w-[1280px] items-center justify-between px-2">
         <Link href={"/blog"}>
-          <Image
-            src={"/images/blog/logo/logo-no-background.png"}
-            width={200}
-            height={50}
-            alt="parsaaghayi's blog logo"
-          />
+          <div className="relative h-[30px] w-[150px] lg:h-[45px] lg:w-[225px]">
+            <Image
+              src={"/images/blog/logo/logo-no-background.png"}
+              fill
+              alt="parsaaghayi's blog logo"
+            />
+          </div>
         </Link>
-        <NavLinks />
-        <div className="flex items-center justify-center gap-5">
+        <NavLinks className="hidden md:flex" />
+        <div className="flex items-center justify-center gap-1 sm:gap-5">
           <Image
             src={"/images/blog/icons/search.svg"}
             width={24}
             height={24}
             alt="search icon"
-            className="hover:cursor-pointer"
+            className="hidden hover:cursor-pointer sm:block"
           />
-          <Button color={"purple"} text={"Subscribe"} />
+          <Button
+            color={"purple"}
+            text={"Subscribe"}
+            className="!px-4 !py-1 sm:flex sm:!px-5 sm:!py-2"
+          />
+          <BurgerButton />
         </div>
       </div>
     </div>
diff --git a/src/app/(routes)/blog/components/header/navLinks.tsx b/src/app/(routes)/blog/components/header/navLinks.tsx
index f03ddda..1f7bbc4 100644
--- a/src/app/(routes)/blog/components/header/navLinks.tsx
+++ b/src/app/(routes)/blog/components/header/navLinks.tsx
@@ -3,11 +3,15 @@
 import { usePathname } from "next/navigation";
 import Link from "next/link";
 
-export function NavLinks() {
+type NavLinksPropsType = {
+  className?: string;
+};
+
+export function NavLinks({ className }: NavLinksPropsType) {
   const pathname = usePathname();
 
   return (
-    <nav className="menu flex flex-nowrap gap-5">
+    <nav className={`menu flex flex-nowrap gap-5 ${className}`}>
       <Link
         className={`text-[16px] font-[600] ${pathname === "/blog" ? "text-blog-text-hover" : "text-blog-text-default"} transition-all hover:scale-105`}
         href="/blog"
diff --git a/src/app/(routes)/blog/components/mobile-menu/mobileMenu.tsx b/src/app/(routes)/blog/components/mobile-menu/mobileMenu.tsx
index f489d64..57740c7 100644
--- a/src/app/(routes)/blog/components/mobile-menu/mobileMenu.tsx
+++ b/src/app/(routes)/blog/components/mobile-menu/mobileMenu.tsx
@@ -1,3 +1,6 @@
+import Image from "next/image";
+import Link from "next/link";
+
 type propsType = {
   clicked: boolean;
   setClicked: React.Dispatch<React.SetStateAction<boolean>>;
@@ -10,72 +13,64 @@ export default function MobileMenu({ clicked, setClicked }: propsType) {
         onClick={() => setClicked(false)}
       ></div>
       <div
-        className={`fixed start-0 top-0 z-40 flex h-full w-[250px] select-none flex-col items-start gap-10 bg-[#fd6f00] ${clicked ? "start-0" : "start-[-260px]"} mobile-menu lg:start-[-260px]`}
+        className={`fixed start-0 top-0 z-40 flex h-full w-[250px] select-none flex-col items-start gap-10 bg-blog-purple ${clicked ? "start-0" : "start-[-260px]"} mobile-menu lg:start-[-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 className="z-50 flex w-full flex-wrap items-center justify-start bg-blog-purple px-3 py-10">
+          <div className="relative h-[30px] w-[150px] lg:h-[45px] lg:w-[225px]">
+            <Image
+              src={"/images/blog/logo/logo-no-background.png"}
+              fill
+              alt="parsaaghayi's blog 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
+        <nav className="flex w-full flex-col">
+          <Link
             href="/#home"
-            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
+            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer text-white"
             onClick={() => {
               setClicked(false);
             }}
           >
             Home
-          </a>
-          <a
+          </Link>
+          <Link
             href="/#about-me"
-            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
+            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer text-white"
             onClick={() => {
               setClicked(false);
             }}
           >
-            About Me
-          </a>
-          <a
+            New
+          </Link>
+          <Link
             href="/#services"
-            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
+            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer text-white"
             onClick={() => {
               setClicked(false);
             }}
           >
-            Services
-          </a>
-          <a
+            Popular
+          </Link>
+          <Link
             href="/#projects"
-            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
+            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer text-white"
             onClick={() => {
               setClicked(false);
             }}
           >
-            Projects
-          </a>
-          <a
+            Reading list
+          </Link>
+          <Link
             href="/#testimonials"
-            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer hover:bg-slate-100"
+            className="block w-full whitespace-nowrap px-[14px] py-[10px] text-[21px] font-[400] hover:cursor-pointer text-white"
             onClick={() => {
               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={() => {
-              setClicked(false);
-            }}
-          >
-            Contact
-          </a>
-        </ul>
+            Topics
+          </Link>
+        </nav>
       </div>
     </div>
   );
diff --git a/src/app/(routes)/blog/layout.tsx b/src/app/(routes)/blog/layout.tsx
index 1c61448..a450c64 100644
--- a/src/app/(routes)/blog/layout.tsx
+++ b/src/app/(routes)/blog/layout.tsx
@@ -23,7 +23,7 @@ export default function RootLayout({
 
       <Header />
 
-      <div className="main blog relative my-[200px] flex w-full flex-wrap justify-center">
+      <div className="main blog relative my-[200px] flex w-full flex-wrap justify-center overflow-hidden">
         {children}
       </div>