From b493e9d33fcf128097991dbbe20e7dcf3f7924de Mon Sep 17 00:00:00 2001
From: Dhruv Chandak <dhruvchandak5@gmail.com>
Date: Mon, 8 Jul 2024 22:16:08 +0530
Subject: [PATCH] Fix Navbar Button Visibility Based on Current Route

---
 frontend/src/components/Navbar.tsx | 73 ++++++++++++++++++++----------
 1 file changed, 49 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 857c6c3..cbcaae2 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -6,6 +6,7 @@ import { useState } from "react";
 export const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const navigate = useNavigate();
+  const [showGameButton, setShowGameButton] = useState(false);
   return (
     <nav className="bg-white z-50 border-gray-200 dark:bg-[#262522] borbder-b shadow-lg">
       <div className="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
@@ -38,32 +39,56 @@ export const Navbar = () => {
           }`}
           id="navbar-default"
         >
-          <Button
-            className="bg-transparent mx-4 hover:bg-black w-[50%]"
-            onClick={() => navigate("/simulation")}
-          >
-            Simulation
-          </Button>
-          <Button
-            className="bg-transparent mx-4 hover:bg-black w-[50%]"
-            onClick={() => navigate("/game")}
-          >
-            Game
-          </Button>
+          {!showGameButton && (
+            <Button
+              className="bg-transparent mx-4 hover:bg-black w-[50%]"
+              onClick={() => {
+                setShowGameButton(!showGameButton);
+                navigate("/simulation");
+                setIsMenuOpen(false);
+              }}
+            >
+              Simulation
+            </Button>
+          )}
+          {showGameButton && (
+            <Button
+              className="bg-transparent mx-4 hover:bg-black w-[50%]"
+              onClick={() => {
+                setShowGameButton(!showGameButton);
+                navigate("/game");
+                setIsMenuOpen(false);
+              }}
+            >
+              Game
+            </Button>
+          )}
         </div>
         <div className="hidden w-full md:block md:w-auto" id="navbar-default">
-          <Button
-            className="bg-transparent mx-4 hover:bg-black"
-            onClick={() => navigate("/simulation")}
-          >
-            Simulation
-          </Button>
-          <Button
-            className="bg-transparent mx-4 hover:bg-black"
-            onClick={() => navigate("/game")}
-          >
-            Game
-          </Button>
+          {!showGameButton && (
+            <Button
+              className="bg-transparent mx-4 hover:bg-black"
+              onClick={() => {
+                setShowGameButton(!showGameButton);
+                navigate("/simulation");
+                setIsMenuOpen(false);
+              }}
+            >
+              Simulation
+            </Button>
+          )}
+          {showGameButton && (
+            <Button
+              className="bg-transparent mx-4 hover:bg-black"
+              onClick={() => {
+                setShowGameButton(!showGameButton);
+                navigate("/game");
+                setIsMenuOpen(false);
+              }}
+            >
+              Game
+            </Button>
+          )}
         </div>
       </div>
     </nav>