From 47938f1e8ef706bca228dba0b6f16a0e627306d0 Mon Sep 17 00:00:00 2001
From: Anshul Khandelwal <kanshul45@gmail.com>
Date: Thu, 7 Dec 2023 18:03:30 -0800
Subject: [PATCH] logout button + cookie deletion

---
 Frontend/src/pages/nav.js | 116 ++++++++++++++++++--------------------
 1 file changed, 54 insertions(+), 62 deletions(-)

diff --git a/Frontend/src/pages/nav.js b/Frontend/src/pages/nav.js
index 3e7e612..1a055e0 100644
--- a/Frontend/src/pages/nav.js
+++ b/Frontend/src/pages/nav.js
@@ -1,102 +1,95 @@
-// Import React
 import React from "react";
 import Link from "next/link";
 
-// NavBar Component
+
+
 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=/;";
+    
+
+ 
+  };
+
   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="/" className="flex items-center py-4 px-2">
-                <span className="font-semibold text-blue-500 text-lg">
+              <Link href="/">
+                <span className="flex items-center py-4 px-2 cursor-pointer font-semibold text-blue-500 text-lg">
                   PicturePerfect
                 </span>
               </Link>
             </div>
+
             {/* Primary Navbar items */}
             <div className="hidden md:flex items-center space-x-1">
-              <Link
-                href="/vote"
-                className="py-4 px-2 text-gray-300 font-semibold hover:text-blue-400 transition duration-300"
-              >
-                Vote
+              <Link href="/vote">
+                <span className="py-4 px-2 text-gray-300 font-semibold hover:text-blue-400 transition duration-300 cursor-pointer">
+                  Vote
+                </span>
               </Link>
-              <Link
-                href="/portfolio"
-                className="py-4 px-2 text-gray-300 font-semibold hover:text-blue-400 transition duration-300"
-              >
-                Portfolio
+              <Link href="/portfolio">
+                <span className="py-4 px-2 text-gray-300 font-semibold hover:text-blue-400 transition duration-300 cursor-pointer">
+                  Portfolio
+                </span>
               </Link>
-              <Link
-                href="/leaderboard"
-                className="py-4 px-2 text-gray-300 font-semibold hover:text-blue-400 transition duration-300"
-              >
-                Leaderboard
+              <Link href="/leaderboard">
+                <span className="py-4 px-2 text-gray-300 font-semibold hover:text-blue-400 transition duration-300 cursor-pointer">
+                  Leaderboard
+                </span>
               </Link>
-              <Link
-                href="/create"
-                className="py-4 px-2 text-gray-300 font-semibold hover:text-blue-400 transition duration-300"
-              >
-                Create
+              <Link href="/create">
+                <span className="py-4 px-2 text-gray-300 font-semibold hover:text-blue-400 transition duration-300 cursor-pointer">
+                  Create
+                </span>
               </Link>
             </div>
           </div>
-          {/* Mobile menu button */}
-          <div className="md:hidden flex items-center">
-            <button className="outline-none mobile-menu-button">
-              <svg
-                className=" w-6 h-6 text-gray-300 hover:text-blue-400 "
-                x-show="!showMenu"
-                fill="none"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth="2"
-                viewBox="0 0 24 24"
-                stroke="currentColor"
-              >
-                <path d="M4 6h16M4 12h16M4 18h16"></path>
-              </svg>
-            </button>
+
+          {/* 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>
           </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="/vote"
-              className="block text-sm px-2 py-4 hover:bg-blue-500 transition duration-300"
-            >
-              Vote
+            <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="/portfolio"
-              className="block text-sm px-2 py-4 hover:bg-blue-500 transition duration-300"
-            >
-              Portfolio
+            <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="/leaderboard"
-              className="block text-sm px-2 py-4 hover:bg-blue-500 transition duration-300"
-            >
-              Leaderboard
-            </Link>
-            <Link
-              href="/create"
-              className="block text-sm px-2 py-4 hover:bg-blue-500 transition duration-300"
-            >
-              Create
+            <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>
@@ -105,5 +98,4 @@ const NavBar = () => {
   );
 };
 
-// Export NavBar
 export default NavBar;