From efb8dcd60ccc37cee5bdce3ff476e37413cb03f3 Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Mon, 18 Nov 2024 15:33:20 +0330
Subject: [PATCH] loading progressbar added

---
 package-lock.json                             | 27 +++++++++++++++++--
 package.json                                  |  1 +
 .../(website)/components/header/header.tsx    | 24 ++++++++---------
 .../selectLanguage/selectLanguage.tsx         | 21 +++++++++------
 src/app/(routes)/(website)/layout.tsx         |  3 ++-
 src/app/(routes)/blog/layout.tsx              |  7 +++--
 6 files changed, 58 insertions(+), 25 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4dd5c71..dd63213 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "cookies-next": "^4.3.0",
         "next": "14.2.11",
+        "nextjs-toploader": "^3.7.15",
         "react": "^18",
         "react-dom": "^18",
         "react-loading-skeleton": "^3.5.0",
@@ -4156,6 +4157,24 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/nextjs-toploader": {
+      "version": "3.7.15",
+      "resolved": "https://registry.npmjs.org/nextjs-toploader/-/nextjs-toploader-3.7.15.tgz",
+      "integrity": "sha512-DvvXEJVRPfE2j1HVXgFhmPl8pRcLb/4mvyVBDuYdMdkbEY7KJghp0fG5iOZ002cV6awbBw9j/Di7vQL8LRazxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "nprogress": "^0.2.0",
+        "prop-types": "^15.8.1"
+      },
+      "funding": {
+        "url": "https://buymeacoffee.com/thesgj"
+      },
+      "peerDependencies": {
+        "next": ">= 6.0.0",
+        "react": ">= 16.0.0",
+        "react-dom": ">= 16.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -4165,6 +4184,12 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/nprogress": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
+      "integrity": "sha512-I19aIingLgR1fmhftnbWWO3dXc0hSxqHQHQb3H8m+K3TnEn/iSeTZZOyvKXWqQESMwuUVnatlCnZdLBZZt2VSA==",
+      "license": "MIT"
+    },
     "node_modules/object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4763,7 +4788,6 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "loose-envify": "^1.4.0",
@@ -4830,7 +4854,6 @@
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/react-loading-skeleton": {
diff --git a/package.json b/package.json
index e555b31..9c21408 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "cookies-next": "^4.3.0",
     "next": "14.2.11",
+    "nextjs-toploader": "^3.7.15",
     "react": "^18",
     "react-dom": "^18",
     "react-loading-skeleton": "^3.5.0",
diff --git a/src/app/(routes)/(website)/components/header/header.tsx b/src/app/(routes)/(website)/components/header/header.tsx
index 7fca604..06dcf82 100644
--- a/src/app/(routes)/(website)/components/header/header.tsx
+++ b/src/app/(routes)/(website)/components/header/header.tsx
@@ -23,42 +23,42 @@ export default async function Header() {
         </p>
       </div>
       <ul className="hidden items-center justify-center rounded p-2 lg:flex">
-        <a
+        <Link
           href="/#home"
           className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
         >
           {dict.website.header.Home}
-        </a>
-        <a
+        </Link>
+        <Link
           href="/#about-me"
           className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
         >
           {dict.website.header.AboutMe}
-        </a>
-        <a
+        </Link>
+        <Link
           href="/#services"
           className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
         >
           {dict.website.header.Services}
-        </a>
-        <a
+        </Link>
+        <Link
           href="/#projects"
           className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
         >
           {dict.website.header.Projects}
-        </a>
-        <a
+        </Link>
+        <Link
           href="/#testimonials"
           className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
         >
           {dict.website.header.Testimonials}
-        </a>
-        <a
+        </Link>
+        <Link
           href="/#contact"
           className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
         >
           {dict.website.header.Contact}
-        </a>
+        </Link>
         <Link
           className="mx-2 whitespace-nowrap rounded-lg px-1 py-[10px] text-[15px] font-[600] capitalize hover:text-[#FD6F00] xl:text-[20px]"
           href={"/blog"}
diff --git a/src/app/(routes)/(website)/components/selectLanguage/selectLanguage.tsx b/src/app/(routes)/(website)/components/selectLanguage/selectLanguage.tsx
index a28a5d9..457363e 100644
--- a/src/app/(routes)/(website)/components/selectLanguage/selectLanguage.tsx
+++ b/src/app/(routes)/(website)/components/selectLanguage/selectLanguage.tsx
@@ -4,6 +4,7 @@ import { setCookie } from "cookies-next";
 import { LocaleCookieType } from "@/app/types/types";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
+import Link from "next/link";
 
 interface SelectLanguageProps {
   selectedLocale: LocaleCookieType | undefined;
@@ -22,14 +23,14 @@ export default function SelectLanguage({
       {selectedLocale ? (
         <p
           onClick={() => setisOpen(!isOpen)}
-          className="mx-2 mb-[5px] cursor-pointer select-none whitespace-nowrap border-b-2 border-[#FD6F00] px-2 py-[10px] pb-[5px] text-[15px] xl:text-[20px] font-[600] text-[#FD6F00] hover:text-[#FD6F00]"
+          className="mx-2 mb-[5px] cursor-pointer select-none whitespace-nowrap border-b-2 border-[#FD6F00] px-2 py-[10px] pb-[5px] text-[15px] font-[600] text-[#FD6F00] hover:text-[#FD6F00] xl:text-[20px]"
         >
           {selectedLocale?.value}
         </p>
       ) : (
         <p
           onClick={() => setisOpen(!isOpen)}
-          className="mx-2 mb-[5px] cursor-pointer select-none whitespace-nowrap px-2 py-[10px] pb-[5px] text-[15px] xl:text-[20px] font-[600] hover:text-[#FD6F00]"
+          className="mx-2 mb-[5px] cursor-pointer select-none whitespace-nowrap px-2 py-[10px] pb-[5px] text-[15px] font-[600] hover:text-[#FD6F00] xl:text-[20px]"
         >
           {defaultLocale?.value}
         </p>
@@ -38,24 +39,28 @@ export default function SelectLanguage({
       <ul
         className={`absolute start-0 z-20 flex w-full flex-col items-center gap-2 rounded-lg border bg-white py-3 transition-all ${isOpen ? "top-[50px] scale-100" : "top-0 scale-0"}`}
       >
-        <li
+        <Link
+          href=""
           className="w-[70%] border-b-2 border-[rgba(0,0,0,0)] pb-1 text-center hover:cursor-pointer hover:border-[#FD6F00]"
-          onClick={() => {
+          onClick={(e) => {
+            e.preventDefault();
             setCookie("selectedLocale", "fa"), router.refresh();
             setisOpen(false);
           }}
         >
           فارسی
-        </li>
-        <li
+        </Link>
+        <Link
+          href=""
           className="w-[70%] border-b-2 border-[rgba(0,0,0,0)] pb-1 text-center hover:cursor-pointer hover:border-[#FD6F00]"
-          onClick={() => {
+          onClick={(e) => {
+            e.preventDefault();
             setCookie("selectedLocale", "en"), router.refresh();
             setisOpen(false);
           }}
         >
           English
-        </li>
+        </Link>
       </ul>
     </div>
   );
diff --git a/src/app/(routes)/(website)/layout.tsx b/src/app/(routes)/(website)/layout.tsx
index 6a2d4c8..d0cfdc6 100644
--- a/src/app/(routes)/(website)/layout.tsx
+++ b/src/app/(routes)/(website)/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import Header from "./components/header/header";
 import Footer from "./components/footer/footer";
+import NextTopLoader from "nextjs-toploader";
 
 export const metadata: Metadata = {
   title: {
@@ -46,7 +47,7 @@ export default function RootLayout({
       </a>
 
       <Header />
-
+      <NextTopLoader color="rgb(253 111 0)" showAtBottom={false} />
       <div className="main my-10 flex w-full justify-center">{children}</div>
 
       <Footer />
diff --git a/src/app/(routes)/blog/layout.tsx b/src/app/(routes)/blog/layout.tsx
index 8661420..4af3701 100644
--- a/src/app/(routes)/blog/layout.tsx
+++ b/src/app/(routes)/blog/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import Header from "./components/header/header";
 import Footer from "./components/footer/footer";
+import NextTopLoader from "nextjs-toploader";
 
 export const metadata: Metadata = {
   title: {
@@ -14,7 +15,9 @@ export const metadata: Metadata = {
       default: "parsa aghayi's blog",
     },
     description: "parsa aghayi personal blog",
-    images: [`${process.env.NEXT_PUBLIC_FRONT_URL}/og-image?text=parsa aghayi's personal blog`],
+    images: [
+      `${process.env.NEXT_PUBLIC_FRONT_URL}/og-image?text=parsa aghayi's personal blog`,
+    ],
   },
 };
 
@@ -33,7 +36,7 @@ export default function RootLayout({
       />
 
       <Header />
-
+      <NextTopLoader color="rgb(146 131 224)" showAtBottom={false} />
       <div className="main blog relative my-[100px] flex w-full flex-wrap justify-center md:my-[150px]">
         {children}
       </div>