menu is responsive now

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

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"

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"}>
+          <div className="relative h-[30px] w-[150px] lg:h-[45px] lg:w-[225px]">
             <Image
               src={"/images/blog/logo/logo-no-background.png"}
-            width={200}
-            height={50}
+              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>

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"

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>
   );

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>