From a0398286c3eb941c3192098f0db167097afea9cc Mon Sep 17 00:00:00 2001
From: PrathamX595 <pratham.seth.cer23@itbhu.ac.in>
Date: Sun, 30 Jun 2024 18:37:20 +0530
Subject: [PATCH] Frontend: Improved Navbar by dynamic links

The navbar buttons are generated based on the data
in an array. This allows for easier changes to the navbar.

The shadow overlay on the rest of the screen is also amended
and a drop shadow is added on the navbar.

Fixes #122
---
 frontend/src/Navbar.tsx | 142 +++++++++++++++++++++++-----------------
 1 file changed, 81 insertions(+), 61 deletions(-)

diff --git a/frontend/src/Navbar.tsx b/frontend/src/Navbar.tsx
index 0550fb5..52eb5c8 100644
--- a/frontend/src/Navbar.tsx
+++ b/frontend/src/Navbar.tsx
@@ -127,15 +127,43 @@ const rules = (
         </div>
     </>
 );
+
 const Navbar: React.FC = () => {
     const [sidebarOpen, setSidebarOpen] = useState(false);
+    const links = [
+        {
+            text: 'Login',
+            type: 'link',
+            callback: () => navigate('/login'),
+        },
+        {
+            text: 'Logout',
+            type: 'link',
+            callback: () => auth.logout(),
+        },
+        {
+            text: 'About Us',
+            type: 'modal',
+            callback: () =>
+                modal.show('aboutUsModal', aboutUs, 'large', [
+                    { text: 'Close', type: 'submit' },
+                ]),
+        },
+        {
+            text: 'Rules',
+            type: 'modal',
+            callback: () =>
+                modal.show('rulesModal', rules, 'large', [
+                    { text: 'Close', type: 'submit' },
+                ]),
+        },
+    ];
     const auth = useAuth();
     const modal = useModal();
     const navigate = useNavigate();
     const location = useLocation();
     const showLoginBtn =
         location.pathname !== '/login' && location.pathname !== '/signup';
-
     const toggleMenu = () => {
         setSidebarOpen(!sidebarOpen);
     };
@@ -199,9 +227,7 @@ const Navbar: React.FC = () => {
                 <div
                     className={`bg-gray-300 text-black border-gray-600 ${sidebarOpen ? 'w-64' : 'w-0'} p-4 shadow-lg pl-10 rounded-r-lg relative z-30 transform transition-width duration-300 `}
                     style={{
-                        boxShadow: sidebarOpen
-                            ? '0px 0px 20px rgba(0, 0, 0, 0.3)'
-                            : 'none',
+                        filter: 'drop-shadow(0px 0px 20px rgb(0, 0, 0))',
                     }}
                 >
                     <button
@@ -219,70 +245,64 @@ const Navbar: React.FC = () => {
                             <div className="mb-2 mt-20 text-2xl font-kavoon align-center text-stroke-2 text-white font-bold">
                                 {auth.getUser()?.name}
                             </div>
-                            <Button
-                                variant="accept"
-                                size="medium"
-                                fontSize="text-2xl"
-                                onClick={auth.logout}
-                                className={`mb-2 mt-5 ${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`}
-                            >
-                                Logout
-                            </Button>
+                            <div className="my-10">
+                                {links.map((link, index) => {
+                                    if (
+                                        link.text === 'Logout' ||
+                                        link.type === 'modal'
+                                    ) {
+                                        return (
+                                            <div className="mt-4" key={index}>
+                                                <Button
+                                                    variant="accept"
+                                                    size="medium"
+                                                    fontSize="text-2xl"
+                                                    onClick={() => {
+                                                        link.callback();
+                                                        setSidebarOpen(false);
+                                                    }}
+                                                    className="mb-2"
+                                                >
+                                                    {link.text}
+                                                </Button>
+                                            </div>
+                                        );
+                                    }
+                                })}
+                            </div>
                         </>
                     ) : (
                         <>
-                            <Button
-                                variant="accept"
-                                size="medium"
-                                fontSize="text-2xl"
-                                onClick={() => navigate('/login')}
-                                className={`mb-2 mt-20 ${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`}
-                            >
-                                Login
-                            </Button>
+                            <div className="my-10">
+                                {links.map((link, index) => {
+                                    if (
+                                        link.text === 'Login' ||
+                                        link.type === 'modal'
+                                    ) {
+                                        return (
+                                            <div className="mt-4" key={index}>
+                                                <Button
+                                                    variant="accept"
+                                                    size="medium"
+                                                    fontSize="text-2xl"
+                                                    onClick={() => {
+                                                        link.callback();
+                                                        setSidebarOpen(false);
+                                                    }}
+                                                    className="mb-2"
+                                                >
+                                                    {link.text}
+                                                </Button>
+                                            </div>
+                                        );
+                                    }
+                                })}
+                            </div>
                         </>
                     )}
-                    <div className="mt-4">
-                        <Button
-                            variant="accept"
-                            size="medium"
-                            fontSize="text-2xl"
-                            onClick={() => {
-                                modal.show('aboutUsModal', aboutUs, 'large', [
-                                    {
-                                        text: 'Close',
-                                        type: 'submit',
-                                    },
-                                ]);
-                                toggleMenu();
-                            }}
-                            className={`mb-2 ${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`}
-                        >
-                            About Us
-                        </Button>
-                    </div>
-                    <div className="mt-4">
-                        <Button
-                            variant="accept"
-                            size="medium"
-                            fontSize="text-2xl"
-                            onClick={() => {
-                                modal.show('rulesModal', rules, 'large', [
-                                    {
-                                        text: 'Close',
-                                        type: 'submit',
-                                    },
-                                ]);
-                                toggleMenu();
-                            }}
-                            className={`${sidebarOpen ? '' : 'transform -translate-x-full duration-700'}`}
-                        >
-                            Rules
-                        </Button>
-                    </div>
                 </div>
                 <div
-                    className="flex-grow bg-black bg-opacity-50 transition-opacity duration-700"
+                    className="flex-grow bg-black bg-opacity-50 transition-opacity duration-700 translate-x-[-0.2rem] scale-x-110"
                     onClick={toggleMenu}
                 ></div>
             </div>