menu is responsive now

2024-10-02 15:41:23 +03:30 · 2024-10-02 15:41:23 +03:30 · 9a467b9602
commit 9a467b9602
parent c22affe6e3
6 changed files with 67 additions and 54 deletions
--- 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
--- 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"
--- 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>
--- 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"
--- 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>
  );
--- 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>