From 0ecc9a830ea5b32d8139ee623d091dd2e60aabce Mon Sep 17 00:00:00 2001
From: Aaron Po <apo2@uwo.ca>
Date: Tue, 13 Oct 2026 01:32:28 -0400
Subject: [PATCH] Hide the navbar auth actions on the login and register routes

---
 .../app/components/ui/navbar/Navbar.tsx       | 154 +++++++++---------
 1 file changed, 81 insertions(+), 73 deletions(-)

diff --git a/web/frontend/app/components/ui/navbar/Navbar.tsx b/web/frontend/app/components/ui/navbar/Navbar.tsx
index a91423a6..491345ba 100644
--- a/web/frontend/app/components/ui/navbar/Navbar.tsx
+++ b/web/frontend/app/components/ui/navbar/Navbar.tsx
@@ -1,5 +1,5 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
-import { Link } from 'react-router';
+import { Link, useLocation } from 'react-router';
 import NavLinks from './NavLinks';
 import UserMenu from './UserMenu';
 
@@ -12,85 +12,93 @@ interface NavbarProps {
     } | null;
 }
 
-const Navbar = ({ auth }: NavbarProps) => (
-    <Disclosure
-        as="nav"
-        className="sticky top-0 z-50 border-b border-base-300 bg-base-100 shadow-md"
-    >
-        {({ open }) => (
-            <>
-                <div className="navbar mx-auto max-w-7xl px-2 sm:px-4">
-                    <div className="navbar-start gap-2">
-                        <DisclosureButton
-                            className="btn btn-ghost btn-square lg:hidden"
-                            aria-label="Toggle navigation"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                fill="none"
-                                viewBox="0 0 24 24"
-                                className="h-5 w-5 stroke-current"
+const Navbar = ({ auth }: NavbarProps) => {
+    const { pathname } = useLocation();
+    const onAuthRoute = pathname === '/login' || pathname === '/register';
+    const showAuthActions = !auth && !onAuthRoute;
+
+    return (
+        <Disclosure
+            as="nav"
+            className="sticky top-0 z-50 border-b border-base-300 bg-base-100 shadow-md"
+        >
+            {({ open }) => (
+                <>
+                    <div className="navbar mx-auto max-w-7xl px-2 sm:px-4">
+                        <div className="navbar-start gap-2">
+                            <DisclosureButton
+                                className="btn btn-ghost btn-square lg:hidden"
+                                aria-label="Toggle navigation"
                             >
-                                {open ? (
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth="2"
-                                        d="M6 18L18 6M6 6l12 12"
-                                    />
-                                ) : (
-                                    <path
-                                        strokeLinecap="round"
-                                        strokeLinejoin="round"
-                                        strokeWidth="2"
-                                        d="M4 6h16M4 12h16M4 18h16"
-                                    />
-                                )}
-                            </svg>
-                        </DisclosureButton>
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    fill="none"
+                                    viewBox="0 0 24 24"
+                                    className="h-5 w-5 stroke-current"
+                                >
+                                    {open ? (
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth="2"
+                                            d="M6 18L18 6M6 6l12 12"
+                                        />
+                                    ) : (
+                                        <path
+                                            strokeLinecap="round"
+                                            strokeLinejoin="round"
+                                            strokeWidth="2"
+                                            d="M4 6h16M4 12h16M4 18h16"
+                                        />
+                                    )}
+                                </svg>
+                            </DisclosureButton>
 
-                        <Link to="/" className="lg:text-xl text-lg font-bold">
-                            The Biergarten App
-                        </Link>
-                    </div>
-
-                    <NavLinks variant="desktop" showRegister={!auth} />
-
-                    <div className="navbar-end gap-2">
-                        {!auth && (
-                            <Link
-                                to="/register"
-                                className="btn btn-ghost btn-sm hidden sm:inline-flex"
-                            >
-                                Register User
+                            <Link to="/" className="lg:text-xl text-lg font-bold">
+                                The Biergarten App
                             </Link>
-                        )}
+                        </div>
 
-                        {auth ? (
-                            <>
-                                <Link to="/dashboard" className="btn btn-primary btn-sm">
-                                    Dashboard
+                        <NavLinks variant="desktop" showRegister={showAuthActions} />
+
+                        <div className="navbar-end gap-2">
+                            {showAuthActions && (
+                                <Link
+                                    to="/register"
+                                    className="btn btn-ghost btn-sm hidden sm:inline-flex"
+                                >
+                                    Register User
                                 </Link>
+                            )}
 
-                                <UserMenu
-                                    username={auth.username}
-                                    userAccountId={auth.userAccountId}
-                                />
-                            </>
-                        ) : (
-                            <Link to="/login" className="btn btn-primary btn-sm">
-                                Login
-                            </Link>
-                        )}
+                            {auth ? (
+                                <>
+                                    <Link to="/dashboard" className="btn btn-primary btn-sm">
+                                        Dashboard
+                                    </Link>
+
+                                    <UserMenu
+                                        username={auth.username}
+                                        userAccountId={auth.userAccountId}
+                                    />
+                                </>
+                            ) : (
+                                !onAuthRoute && (
+                                    <Link to="/login" className="btn btn-primary btn-sm">
+                                        Login
+                                    </Link>
+                                )
+                            )}
+                        </div>
                     </div>
-                </div>
 
-                <DisclosurePanel className="border-t border-base-300 bg-base-100 px-4 py-3 lg:hidden">
-                    <NavLinks variant="mobile" showRegister={!auth} />
-                </DisclosurePanel>
-            </>
-        )}
-    </Disclosure>
-);
+                    <DisclosurePanel className="border-t border-base-300 bg-base-100 px-4 py-3 lg:hidden">
+                        <NavLinks variant="mobile" showRegister={showAuthActions} />
+                    </DisclosurePanel>
+                </>
+            )}
+        </Disclosure>
+    );
+};
 
 export default Navbar;