d

gp-sb · Dec 8, 2023 · dc19004 · dc19004
1 parent 10999c7
commit dc19004
Showing 1 changed file with 31 additions and 66 deletions.
diff --git a/Frontend/src/pages/nav.js b/Frontend/src/pages/nav.js
@@ -1,97 +1,62 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import Link from "next/link";
 
+const NavBar = () => {
+  const [currentPath, setCurrentPath] = useState('');
 
+  useEffect(() => {
+    // This code runs only in the browser
+    setCurrentPath(window.location.pathname);
+  }, []);
 
-const NavBar = () => {
   const handleLogout = () => {
-      // Set the 'token' cookie to expire immediately, effectively logging the user out
-      document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;";
-
-
-
+    // Set the 'token' cookie to expire immediately, effectively logging the user out
+    document.cookie = "token=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/;";
   };
 
+  const NavLink = ({ href, children }) => (
+    <Link href={href}>
+      <a className={`py-4 px-2 ${currentPath === href ? "text-blue-400" : "text-gray-300"} font-semibold hover:text-blue-400 transition duration-300`}>
+        {children}
+      </a>
+    </Link>
+  );
+
   return (
     <nav className="bg-black shadow-lg">
       <div className="max-w-6xl mx-auto px-4">
         <div className="flex justify-between">
-          {/* Left side - Logo and Navbar items */}
           <div className="flex space-x-7">
             <div>
-              {/* Brand Logo */}
               <Link href="/">
-                <span className="flex items-center py-4 px-2 cursor-pointer font-semibold text-blue-500 text-lg">
+                <a className="flex items-center py-4 px-2 font-semibold text-blue-500 text-lg">
                   PicturePerfect
-                </span>
+                </a>
               </Link>
             </div>
 
-            {/* Primary Navbar items */}
             <div className="hidden md:flex items-center space-x-1">
-              <Link href="/vote">
-                <span className={`py-4 px-2 ${window.location.pathname === "/vote" ? "text-blue-400" : "text-gray-300"} font-semibold hover:text-blue-400 transition duration-300 cursor-pointer`}>
-                  Vote
-                </span>
-              </Link>
-              <Link href="/portfolio">
-                <span className={`py-4 px-2 ${window.location.pathname === "/portfolio" ? "text-blue-400" : "text-gray-300"} text-gray-300 font-semibold hover:text-blue-400 transition duration-300 cursor-pointer`}>
-                  Portfolio
-                </span>
-              </Link>
-              <Link href="/leaderboard">
-                <span className={`py-4 px-2 ${window.location.pathname === "/leaderboard" ? "text-blue-400" : "text-gray-300"} text-gray-300 font-semibold hover:text-blue-400 transition duration-300 cursor-pointer`}>
-                  Leaderboard
-                </span>
-              </Link>
-              <Link href="/create">
-                <span className={`py-4 px-2 ${window.location.pathname === "/create" ? "text-blue-400" : "text-gray-300"} text-gray-300 font-semibold hover:text-blue-400 transition duration-300 cursor-pointer`}>
-                  Create
-                </span>
-              </Link>
+              <NavLink href="/vote">Vote</NavLink>
+              <NavLink href="/portfolio">Portfolio</NavLink>
+              <NavLink href="/leaderboard">Leaderboard</NavLink>
+              <NavLink href="/create">Create</NavLink>
             </div>
           </div>
 
-          {/* Right side - Logout Button */}
           <div className="flex items-center">
-            <span onClick={handleLogout} className="py-4 px-2 text-gray-300 font-semibold hover:text-blue-400 transition duration-300 cursor-pointer">
-              <Link href= "/login"> Logout </Link>
-            </span>
+            <a onClick={handleLogout} className="py-4 px-2 text-gray-300 font-semibold hover:text-blue-400 transition duration-300 cursor-pointer">
+              Logout
+            </a>
           </div>
         </div>
       </div>
 
-      {/* Mobile menu */}
       <div className="hidden mobile-menu">
-        <ul className="">
-          <li>
-            <Link href="/vote">
-              <span className="block text-sm px-2 py-4 hover:bg-blue-500 transition duration-300 cursor-pointer">
-                Vote
-              </span>
-            </Link>
-          </li>
-          <li>
-            <Link href="/portfolio">
-              <span className="block text-sm px-2 py-4 hover:bg-blue-500 transition duration-300 cursor-pointer">
-                Portfolio
-              </span>
-            </Link>
-          </li>
-          <li>
-            <Link href="/leaderboard">
-              <span className="block text-sm px-2 py-4 hover:bg-blue-500 transition duration-300 cursor-pointer">
-                Leaderboard
-              </span>
-            </Link>
-          </li>
-          <li>
-            <Link href="/create">
-              <span className="block text-sm px-2 py-4 hover:bg-blue-500 transition duration-300 cursor-pointer">
-                Create
-              </span>
-            </Link>
-          </li>
+        <ul>
+          <li><NavLink href="/vote">Vote</NavLink></li>
+          <li><NavLink href="/portfolio">Portfolio</NavLink></li>
+          <li><NavLink href="/leaderboard">Leaderboard</NavLink></li>
+          <li><NavLink href="/create">Create</NavLink></li>
         </ul>
       </div>
     </nav>