From 4569fa28ff9ff706651b8c125224bb7fd75e634a Mon Sep 17 00:00:00 2001
From: Jeyavishnu S <sjeyavishnu9865@gmail.com>
Date: Mon, 22 May 2023 20:53:09 +0530
Subject: [PATCH 1/4] [feat] Make the navbar Sticky with Themes

 - Made the navbar sticky.
 - navbar has a backdrop blur for glassy transparent effect
 - The background color of the navbar changes with light/dark theme at 50% opacity for better UI/UX.
---
 src/components/Navbar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index f0a967ea..1c1a6e2b 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -21,8 +21,8 @@ const Navbar = () => {
   const switchTrackColor = theme.mode === "dark" ? "#9CA3AF" : undefined
 
   return (
-    <nav aria-label="Site Nav" className="mx-auto p-5 lg:w-1/2">
-      <div className="flex flex-row justify-between">
+    <nav aria-label="Site Nav" className="sticky top-0 z-[100] backdrop-blur-sm" style={{backgroundColor: theme.mode === "dark" ? "#00000080" : "#f5f6fa80"}}>
+      <div className="flex flex-row justify-between mx-auto p-5 lg:w-1/2">
         {/* Logo for project Hut */}
         <div className="item-navbar block md:hidden" id="dropdown-menu">
           <IconButton aria-label="open drawer" edge="start" onClick={handleDrawerToggle}>

From e61f8ffccc67ca64b8c55627aa7b21bb99aea679 Mon Sep 17 00:00:00 2001
From: Jeyavishnu S <sjeyavishnu9865@gmail.com>
Date: Mon, 22 May 2023 21:18:17 +0530
Subject: [PATCH 2/4] [chore] run pnpm format

---
 src/components/Navbar.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 1c1a6e2b..61da2472 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -21,7 +21,11 @@ const Navbar = () => {
   const switchTrackColor = theme.mode === "dark" ? "#9CA3AF" : undefined
 
   return (
-    <nav aria-label="Site Nav" className="sticky top-0 z-[100] backdrop-blur-sm" style={{backgroundColor: theme.mode === "dark" ? "#00000080" : "#f5f6fa80"}}>
+    <nav
+      aria-label="Site Nav"
+      className="sticky top-0 z-[100] backdrop-blur-sm"
+      style={{ backgroundColor: theme.mode === "dark" ? "#00000080" : "#f5f6fa80" }}
+    >
       <div className="flex flex-row justify-between mx-auto p-5 lg:w-1/2">
         {/* Logo for project Hut */}
         <div className="item-navbar block md:hidden" id="dropdown-menu">

From 702f62527265260bffb10d1f9165cdb2f884008b Mon Sep 17 00:00:00 2001
From: Jeyavishnu S <sjeyavishnu9865@gmail.com>
Date: Mon, 22 May 2023 21:21:39 +0530
Subject: [PATCH 3/4] [chore] Run pnpm format after merge

---
 src/components/Navbar.jsx      | 35 ++++++++-----
 src/components/ScrollToTop.jsx | 91 +++++++++++++++++-----------------
 src/components/SideMenu.jsx    | 30 +++++++++--
 3 files changed, 93 insertions(+), 63 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index a8728109..76af0585 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -48,8 +48,12 @@ const Navbar = () => {
           <ul className="flex items-center gap-5 text-[1rem]">
             <li>
               <NavLink
-                to="/" className={`inline-block py-2 px-3 text-center font-bold  rounded-md ${theme.mode === "light" ? "hover:text-white hover:bg-black focus:text-white focus:bg-black": "hover:text-black hover:bg-white focus:text-black focus:bg-white"}`}
-
+                to="/"
+                className={`inline-block py-2 px-3 text-center font-bold  rounded-md ${
+                  theme.mode === "light"
+                    ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
+                    : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
+                }`}
                 className={`inline-block py-2 px-3 text-center font-bold rounded-md focus:outline-none focus:ring ${
                   theme.name === "light" ? "hover:text-white hover:bg-black" : "hover:text-black hover:bg-white"
                 }`}
@@ -57,16 +61,19 @@ const Navbar = () => {
                   fontWeight: "bold",
                   color: navbar.color,
                   backgroundColor: "white",
-                }}>
+                }}
+              >
                 Home
               </NavLink>
             </li>
             <li>
               <NavLink
-
                 to="/ProjectsPage"
-                className={`inline-block py-2 px-3 text-center font-bold  rounded-md ${theme.mode === "light" ? "hover:text-white hover:bg-black focus:text-white focus:bg-black": "hover:text-black hover:bg-white focus:text-black focus:bg-white"}`}
-
+                className={`inline-block py-2 px-3 text-center font-bold  rounded-md ${
+                  theme.mode === "light"
+                    ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
+                    : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
+                }`}
                 to="/projectspage"
                 className={`inline-block py-2 px-3 text-center font-bold rounded-md focus:outline-none focus:ring ${
                   theme.name === "light" ? "hover:text-white hover:bg-black" : "hover:text-black hover:bg-white"
@@ -82,10 +89,12 @@ const Navbar = () => {
             </li>
             <li>
               <NavLink
-
                 to="/AddYourProjectsGuide"
-                className={`inline-block py-2 px-3 text-center font-bold  rounded-md ${theme.mode === "light" ? "hover:text-white hover:bg-black focus:text-white focus:bg-black": "hover:text-black hover:bg-white focus:text-black focus:bg-white"}`}
-
+                className={`inline-block py-2 px-3 text-center font-bold  rounded-md ${
+                  theme.mode === "light"
+                    ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
+                    : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
+                }`}
                 to="/docs"
                 className={`inline-block py-2 px-3 text-center font-bold rounded-md focus:outline-none focus:ring ${
                   theme.name === "light" ? "hover:text-white hover:bg-black" : "hover:text-black hover:bg-white"
@@ -95,7 +104,6 @@ const Navbar = () => {
                   color: navbar.color,
                   backgroundColor: "white",
                 }}
-
               >
                 Docs
               </NavLink>
@@ -104,12 +112,15 @@ const Navbar = () => {
             <li>
               <NavLink
                 to="/ContributorsPage"
-                className={`inline-block py-2 px-3 text-center font-bold  rounded-md ${theme.mode === "light" ? "hover:text-white hover:bg-black focus:text-white focus:bg-black": "hover:text-black hover:bg-white focus:text-black focus:bg-white"}`}
+                className={`inline-block py-2 px-3 text-center font-bold  rounded-md ${
+                  theme.mode === "light"
+                    ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
+                    : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
+                }`}
               >
                 Contributors
               </NavLink>
             </li>
-
           </ul>
         </div>
 
diff --git a/src/components/ScrollToTop.jsx b/src/components/ScrollToTop.jsx
index 9afa8c6c..54205f8c 100644
--- a/src/components/ScrollToTop.jsx
+++ b/src/components/ScrollToTop.jsx
@@ -1,46 +1,45 @@
-import React, { useState, useEffect } from "react";
-import { AiOutlineArrowUp } from 'react-icons/ai';
-
-const ScrollToTop = () => {
-  const [isVisible, setIsVisible] = useState(false); // State to track the visibility of the scroll-to-top button
-
-  const toggleVisibility = () => {
-    // Function to toggle the visibility of the button based on scroll position
-
-    if (window.pageYOffset > window.innerHeight * 0.25) {
-      setIsVisible(true); // Set visibility to true if scrolled more than 25% of the viewport height
-    } else {
-      setIsVisible(false); // Set visibility to false otherwise
-    }
-  };
-
-  const scrollToTop = () => {
-    // Function to scroll to the top when the button is clicked
-    window.scrollTo({
-      top: 0,
-      behavior: "smooth", // Scroll behavior is set to smooth for a smooth scrolling effect
-    });
-  };
-
-  useEffect(() => {
-    // Effect hook to add and remove event listeners on scroll
-    window.addEventListener("scroll", toggleVisibility); // Add event listener to track scroll position
-    return () => {
-      window.removeEventListener("scroll", toggleVisibility); // Remove event listener when component is unmounted
-    };
-  }, []);
-
-  return (
-    <>
-      <button
-        className={`fixed p-2 bg-gray-400 bg-opacity-25 rounded-full  ${isVisible ? " bottom-4 right-4" : "hidden"}`} 
-        onClick={scrollToTop}
-      >
-        <AiOutlineArrowUp size={25}  />
-      </button>
-    </>
-  );
-};
-
-export default ScrollToTop;
-
+import React, { useState, useEffect } from "react"
+import { AiOutlineArrowUp } from "react-icons/ai"
+
+const ScrollToTop = () => {
+  const [isVisible, setIsVisible] = useState(false) // State to track the visibility of the scroll-to-top button
+
+  const toggleVisibility = () => {
+    // Function to toggle the visibility of the button based on scroll position
+
+    if (window.pageYOffset > window.innerHeight * 0.25) {
+      setIsVisible(true) // Set visibility to true if scrolled more than 25% of the viewport height
+    } else {
+      setIsVisible(false) // Set visibility to false otherwise
+    }
+  }
+
+  const scrollToTop = () => {
+    // Function to scroll to the top when the button is clicked
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth", // Scroll behavior is set to smooth for a smooth scrolling effect
+    })
+  }
+
+  useEffect(() => {
+    // Effect hook to add and remove event listeners on scroll
+    window.addEventListener("scroll", toggleVisibility) // Add event listener to track scroll position
+    return () => {
+      window.removeEventListener("scroll", toggleVisibility) // Remove event listener when component is unmounted
+    }
+  }, [])
+
+  return (
+    <>
+      <button
+        className={`fixed p-2 bg-gray-400 bg-opacity-25 rounded-full  ${isVisible ? " bottom-4 right-4" : "hidden"}`}
+        onClick={scrollToTop}
+      >
+        <AiOutlineArrowUp size={25} />
+      </button>
+    </>
+  )
+}
+
+export default ScrollToTop
diff --git a/src/components/SideMenu.jsx b/src/components/SideMenu.jsx
index 584a4381..72a7bf7b 100644
--- a/src/components/SideMenu.jsx
+++ b/src/components/SideMenu.jsx
@@ -46,7 +46,11 @@ export default function SideMenu(props) {
         <li>
           <NavLink
             to="/"
-            className={`inline-block py-2 px-3 text-center font-bold rounded-md ${theme.mode === "light" ? "hover:text-white hover:bg-black focus:text-white focus:bg-black": "hover:text-black hover:bg-white focus:text-black focus:bg-white"}`}
+            className={`inline-block py-2 px-3 text-center font-bold rounded-md ${
+              theme.mode === "light"
+                ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
+                : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
+            }`}
             onClick={() => props.handleDrawerToggle()}
           >
             {"Home"}
@@ -55,7 +59,11 @@ export default function SideMenu(props) {
         <li>
           <NavLink
             to="/ProjectsPage"
-            className={`inline-block py-2 px-3 text-center font-bold rounded-md ${theme.mode === "light" ? "hover:text-white hover:bg-black focus:text-white focus:bg-black": "hover:text-black hover:bg-white focus:text-black focus:bg-white"}`}
+            className={`inline-block py-2 px-3 text-center font-bold rounded-md ${
+              theme.mode === "light"
+                ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
+                : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
+            }`}
             onClick={() => props.handleDrawerToggle()}
           >
             {"Projects"}
@@ -64,7 +72,11 @@ export default function SideMenu(props) {
         <li>
           <NavLink
             to="/ContributorsPage"
-            className={`inline-block py-2 px-3 text-center font-bold rounded-md ${theme.mode === "light" ? "hover:text-white hover:bg-black focus:text-white focus:bg-black": "hover:text-black hover:bg-white focus:text-black focus:bg-white"}`}
+            className={`inline-block py-2 px-3 text-center font-bold rounded-md ${
+              theme.mode === "light"
+                ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
+                : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
+            }`}
             onClick={() => props.handleDrawerToggle()}
           >
             {"Contributers"}
@@ -73,7 +85,11 @@ export default function SideMenu(props) {
         <li>
           <NavLink
             to="/AddYourProjectsGuide"
-            className={`inline-block py-2 px-3 text-center font-bold rounded-md ${theme.mode === "light" ? "hover:text-white hover:bg-black focus:text-white focus:bg-black": "hover:text-black hover:bg-white focus:text-black focus:bg-white"}`}
+            className={`inline-block py-2 px-3 text-center font-bold rounded-md ${
+              theme.mode === "light"
+                ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
+                : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
+            }`}
             onClick={() => props.handleDrawerToggle()}
           >
             {"Documentation"}
@@ -84,7 +100,11 @@ export default function SideMenu(props) {
             href="https://github.com/priyankarpal/ProjectsHut"
             target={"_blank"}
             rel={"noreferrer"}
-            className={`inline-block py-2 px-3 text-center font-bold rounded-md ${theme.mode === "light" ? "hover:text-white hover:bg-black focus:text-white focus:bg-black": "hover:text-black hover:bg-white focus:text-black focus:bg-white"}`}
+            className={`inline-block py-2 px-3 text-center font-bold rounded-md ${
+              theme.mode === "light"
+                ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
+                : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
+            }`}
             aria-label="Github"
           >
             {"GitHub"}

From 2593c56f41c567cc2217e56e93a42ca7881107f9 Mon Sep 17 00:00:00 2001
From: Jeyavishnu S <sjeyavishnu9865@gmail.com>
Date: Mon, 22 May 2023 21:22:56 +0530
Subject: [PATCH 4/4] [fix] Fix three warning in Navbar.jsx

---
 src/components/Navbar.jsx | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 76af0585..4811f954 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -54,9 +54,6 @@ const Navbar = () => {
                     ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
                     : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
                 }`}
-                className={`inline-block py-2 px-3 text-center font-bold rounded-md focus:outline-none focus:ring ${
-                  theme.name === "light" ? "hover:text-white hover:bg-black" : "hover:text-black hover:bg-white"
-                }`}
                 activestyle={{
                   fontWeight: "bold",
                   color: navbar.color,
@@ -74,10 +71,6 @@ const Navbar = () => {
                     ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
                     : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
                 }`}
-                to="/projectspage"
-                className={`inline-block py-2 px-3 text-center font-bold rounded-md focus:outline-none focus:ring ${
-                  theme.name === "light" ? "hover:text-white hover:bg-black" : "hover:text-black hover:bg-white"
-                }`}
                 activestyle={{
                   fontWeight: "bold",
                   color: navbar.color,
@@ -95,10 +88,6 @@ const Navbar = () => {
                     ? "hover:text-white hover:bg-black focus:text-white focus:bg-black"
                     : "hover:text-black hover:bg-white focus:text-black focus:bg-white"
                 }`}
-                to="/docs"
-                className={`inline-block py-2 px-3 text-center font-bold rounded-md focus:outline-none focus:ring ${
-                  theme.name === "light" ? "hover:text-white hover:bg-black" : "hover:text-black hover:bg-white"
-                }`}
                 activestyle={{
                   fontWeight: "bold",
                   color: navbar.color,