From 84fd38448c07b3f8a4d88dc46d06129a9e50b6fc Mon Sep 17 00:00:00 2001
From: Priyanshu Maurya <mauryapriyanshu-cmpn@atharvacoe.ac.in>
Date: Sun, 16 Jul 2023 23:38:38 +0530
Subject: [PATCH] fix: Added `Navbar` Component in the layout. (#1712)

* Added `Navbar` Component in the layout.

* made required changes

---------

Co-authored-by: Priyankar Pal <88102392+priyankarpal@users.noreply.github.com>
---
 app/docs/page.tsx                | 110 +++++++++++++++----------------
 app/layout.tsx                   |   4 +-
 app/page.tsx                     |   2 -
 app/projects/[username]/page.tsx |   4 --
 app/projects/page.tsx            |   4 --
 components/Navbar.tsx            |   1 +
 6 files changed, 57 insertions(+), 68 deletions(-)

diff --git a/app/docs/page.tsx b/app/docs/page.tsx
index f88121bf..ebf28323 100644
--- a/app/docs/page.tsx
+++ b/app/docs/page.tsx
@@ -2,7 +2,6 @@
 import { useEffect, ReactNode, useState } from "react";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { anOldHope } from "react-syntax-highlighter/dist/esm/styles/hljs";
-import { Navbar } from "@/components";
 import Image from "next/image";
 import { MdOutlineContentCopy } from "react-icons/md";
 import { BsCheck2Circle } from "react-icons/bs";
@@ -224,62 +223,59 @@ function AddYourProjectsGuide(): JSX.Element {
   ));
 
   return (
-    <>
-      <Navbar />
-      <section className="relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:overflow-visible lg:px-0">
-        <div className="absolute inset-0 -z-10 overflow-hidden">
-          <svg
-            className="absolute left-[max(50%,25rem)] top-0 h-[64rem] w-[128rem] -translate-x-1/2 stroke-gray-500 [mask-image:radial-gradient(64rem_64rem_at_top,white,transparent)] opacity-20"
-            aria-hidden="true"
-          >
-            <defs>
-              <pattern
-                id="e813992c-7d03-4cc4-a2bd-151760b470a0"
-                width={180}
-                height={180}
-                x="50%"
-                y={-1}
-                patternUnits="userSpaceOnUse"
-              >
-                <path d="M100 180V.5M.5 .5H180" fill="none" />
-              </pattern>
-            </defs>
-            <rect
-              width="100%"
-              height="100%"
-              strokeWidth={0}
-              fill="url(#e813992c-7d03-4cc4-a2bd-151760b470a0)"
-            />
-          </svg>
-        </div>
-        <div className="flex justify-center mt-10">
-          <button
-            className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 0
-              ? "bg-indigo-600 text-white"
-              : "border border-gray-700 text-gray-300"
-              }`}
-            onClick={() => selectOption(0)}
-          >
-            Add Projects Directly From GitHub
-          </button>
-          <button
-            className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 1
-              ? "bg-indigo-600 text-white"
-              : "border border-gray-700 text-gray-300"
-              }`}
-            onClick={() => selectOption(1)}
-          >
-            Set Up Projects Locally
-          </button>
-        </div>
-        <article className="items-center max-w-5xl mx-auto">
-          <p className="mb-5 text-xl font-bold tracking-tight text-red-500">
-            Follow the following steps to add your projects to ProjectsHut:
-          </p>
-          <div className="option">{stepsRender}</div>
-        </article>
-      </section>
-    </>
+    <section className="relative isolate overflow-hidden px-6 py-24 sm:py-32 lg:overflow-visible lg:px-0">
+      <div className="absolute inset-0 -z-10 overflow-hidden">
+        <svg
+          className="absolute left-[max(50%,25rem)] top-0 h-[64rem] w-[128rem] -translate-x-1/2 stroke-gray-500 [mask-image:radial-gradient(64rem_64rem_at_top,white,transparent)] opacity-20"
+          aria-hidden="true"
+        >
+          <defs>
+            <pattern
+              id="e813992c-7d03-4cc4-a2bd-151760b470a0"
+              width={180}
+              height={180}
+              x="50%"
+              y={-1}
+              patternUnits="userSpaceOnUse"
+            >
+              <path d="M100 180V.5M.5 .5H180" fill="none" />
+            </pattern>
+          </defs>
+          <rect
+            width="100%"
+            height="100%"
+            strokeWidth={0}
+            fill="url(#e813992c-7d03-4cc4-a2bd-151760b470a0)"
+          />
+        </svg>
+      </div>
+      <div className="flex justify-center mt-10">
+        <button
+          className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 0
+            ? "bg-indigo-600 text-white"
+            : "border border-gray-700 text-gray-300"
+            }`}
+          onClick={() => selectOption(0)}
+        >
+          Add Projects Directly From GitHub
+        </button>
+        <button
+          className={`mx-2 px-4 py-2 rounded-lg mb-4 ${selectedOption === 1
+            ? "bg-indigo-600 text-white"
+            : "border border-gray-700 text-gray-300"
+            }`}
+          onClick={() => selectOption(1)}
+        >
+          Set Up Projects Locally
+        </button>
+      </div>
+      <article className="items-center max-w-5xl mx-auto">
+        <p className="mb-5 text-xl font-bold tracking-tight text-red-500">
+          Follow the following steps to add your projects to ProjectsHut:
+        </p>
+        <div className="option">{stepsRender}</div>
+      </article>
+    </section>
   );
 }
 
diff --git a/app/layout.tsx b/app/layout.tsx
index bd770300..3f6a69a7 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,7 +1,7 @@
 import "./globals.css";
 import { Inter } from "next/font/google";
 import { MobileNavBar } from "@/components/MobileNavbar";
-import { Footer } from "@/components"
+import { Navbar, Footer } from "@/components";
 
 
 const inter = Inter({ subsets: ["latin"] });
@@ -20,6 +20,8 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className={inter.className} suppressHydrationWarning={true}>
+        <Navbar />
+
         {children}
 
         <MobileNavBar />
diff --git a/app/page.tsx b/app/page.tsx
index b6128330..4d83091d 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,12 +3,10 @@ import Link from "next/link";
 import Banner from "../components/Banner";
 import Image from "next/image";
 import images from "../DB/homepage-image.json";
-import { Navbar, } from "@/components";
 
 export default function HomePage() {
   return (
     <section>
-      <Navbar />
       <div className="relative overflow-hidden">
         <div className="pt-16 sm:pt-24 sm:pb-40 lg:pt-40 lg:pb-48">
           <div className="relative mx-auto max-w-7xl px-4 sm:static sm:px-6 lg:px-8">
diff --git a/app/projects/[username]/page.tsx b/app/projects/[username]/page.tsx
index 7c1f3318..95ed6800 100644
--- a/app/projects/[username]/page.tsx
+++ b/app/projects/[username]/page.tsx
@@ -17,7 +17,6 @@ import { IoClose } from "react-icons/io5";
 
 import projects from "../../../DB/projects.json";
 import Image from "next/image";
-import { Navbar } from "@/components";
 interface userType {
   bio?: string;
 }
@@ -91,8 +90,6 @@ function ProjectList() {
   };
 
   return (
-    <>
-      <Navbar />
       <section className="flex flex-col gap-4 md:flex-row xsm:my-2 p-4 md:p-8">
         {initialLoading}
         {/* Left side profile section */}
@@ -302,7 +299,6 @@ function ProjectList() {
           </div>
         )}{" "}
       </section>
-    </>
   );
 }
 export default ProjectList;
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 6455d2c0..d056e016 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -12,7 +12,6 @@ import { shuffleProjects } from "../../utils/paginate";
 import ProjectCard from "../../components/ProjectCard";
 import projects from "../../DB/projects.json";
 import { useRouter } from "next/navigation";
-import { Navbar } from "@/components";
 
 interface NewProjectsType {
   username: string;
@@ -203,8 +202,6 @@ const ProjectsPage: NextPage = () => {
     }
   };
   return (
-    <>
-      <Navbar />
       <section className="my-8 max-w-6xl w-11/12 mx-auto sm:my-10">
         <div className="text-[2.5rem] font-bold text-center text-white">
           Search for <span className="text-primary">cool </span> Projects
@@ -363,7 +360,6 @@ const ProjectsPage: NextPage = () => {
           )}
         </div>
       </section>
-    </>
   );
 };
 
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index d6bff2b0..e3d32cf5 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -1,3 +1,4 @@
+"use client";
 import React, { Suspense } from "react";
 import { NextPage } from "next";
 import Link from "next/link";