From 2a9f4338b71638334a389c60202435c7600b8b4c Mon Sep 17 00:00:00 2001
From: Md-Rubel-Ahmed-Rana <mdrubelahmedrana521@gmail.com>
Date: Mon, 8 Jul 2024 23:39:53 +0600
Subject: [PATCH] Navbar design issue solved on mobile view

---
 frontend/src/components/shared/Navbar.tsx | 87 ++++++++++++++++-------
 1 file changed, 62 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/shared/Navbar.tsx b/frontend/src/components/shared/Navbar.tsx
index 1a16df0..873ec03 100644
--- a/frontend/src/components/shared/Navbar.tsx
+++ b/frontend/src/components/shared/Navbar.tsx
@@ -137,12 +137,12 @@ const Navbar = () => {
         <div>
           {!toggle && (
             <button onClick={() => setToggle(!toggle)}>
-              <FaBars />
+              <FaBars className="text-3xl" />
             </button>
           )}
           {toggle && (
             <button onClick={() => setToggle(!toggle)}>
-              <BiX className="text-xl" />
+              <BiX className="text-3xl" />
             </button>
           )}
         </div>
@@ -202,30 +202,67 @@ const Navbar = () => {
         </div>
       </div>
       {toggle && (
-        <div className="flex lg:hidden flex-col gap-3 z-10 absolute top-20 w-full  p-10 bg-gray-200">
-          <button onClick={() => setToggle(false)}>
-            <Link href="/">Home</Link>
-          </button>
-          <button onClick={() => setToggle(false)}>Availability</button>
-          <button onClick={() => setToggle(false)}>Integration</button>
-          <button onClick={() => setToggle(false)}>Community</button>
-          {!user?.email && (
-            <>
-              <button onClick={() => setToggle(false)}>
-                <Link href="/signup">Signup</Link>
-              </button>
-              <button onClick={() => setToggle(false)}>
-                <Link href="/login">Login</Link>
-              </button>
-            </>
-          )}
-
-          {user?.email && (
-            <button onClick={() => setToggle(false)}>
-              <Link href="/teams">My Teams</Link>
+        <div className="flex justify-center items-center">
+          <div className="w-[90%] flex lg:hidden rounded-md flex-col text-start gap-3 z-10 absolute top-20 p-3 shadow-lg dark:bg-gray-700 bg-gray-100">
+            <button
+              className="text-start dark:bg-gray-800 bg-gray-200 shadow-md rounded-md p-3 text-md font-semibold"
+              onClick={() => setToggle(false)}
+            >
+              <Link href="/">Home</Link>
             </button>
-          )}
-          {user?.email && <button onClick={handleLogOut}>Logout</button>}
+            {!user?.email && (
+              <>
+                <button
+                  className="text-start dark:bg-gray-800 bg-gray-200 shadow-md rounded-md p-3 text-md font-semibold"
+                  onClick={() => setToggle(false)}
+                >
+                  <Link href="/signup">Signup</Link>
+                </button>
+                <button
+                  className="text-start dark:bg-gray-800 bg-gray-200 shadow-md rounded-md p-3 text-md font-semibold"
+                  onClick={() => setToggle(false)}
+                >
+                  <Link href="/login">Login</Link>
+                </button>
+              </>
+            )}
+
+            {user.email && (
+              <>
+                <button
+                  className="text-start dark:bg-gray-800 bg-gray-200 shadow-md rounded-md p-3 text-md font-semibold"
+                  onClick={() => setToggle(false)}
+                >
+                  <Link href="/teams">My Teams</Link>
+                </button>
+                <button
+                  className="text-start dark:bg-gray-800 bg-gray-200 shadow-md rounded-md p-3 text-md font-semibold"
+                  onClick={() => setToggle(false)}
+                >
+                  <Link
+                    href={{
+                      pathname: "dashboard",
+                      query: `uId=${user?.id}&activeView=joined-teams`,
+                    }}
+                  >
+                    Joined Teams
+                  </Link>
+                </button>
+                <button
+                  className="text-start dark:bg-gray-800 bg-gray-200 shadow-md rounded-md p-3 text-md font-semibold"
+                  onClick={() => setToggle(false)}
+                >
+                  <Link href="/projects">Projects</Link>
+                </button>
+                <button
+                  className="text-start dark:bg-gray-800 bg-gray-200 shadow-md rounded-md p-3 text-md font-semibold"
+                  onClick={handleLogOut}
+                >
+                  Logout
+                </button>
+              </>
+            )}
+          </div>
         </div>
       )}
       {isOpen && (