Hide the navbar auth buttons while on the auth routes

This commit is contained in:
Aaron Po
2026-10-08 23:10:48 -04:00
parent d0c4958338
commit 6aeda0fc78

View File

@@ -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,7 +12,12 @@ interface NavbarProps {
} | null;
}
const Navbar = ({ auth }: NavbarProps) => (
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"
@@ -54,10 +59,10 @@ const Navbar = ({ auth }: NavbarProps) => (
</Link>
</div>
<NavLinks variant="desktop" showRegister={!auth} />
<NavLinks variant="desktop" showRegister={showAuthActions} />
<div className="navbar-end gap-2">
{!auth && (
{showAuthActions && (
<Link
to="/register"
className="btn btn-ghost btn-sm hidden sm:inline-flex"
@@ -78,19 +83,22 @@ const Navbar = ({ auth }: NavbarProps) => (
/>
</>
) : (
!onAuthRoute && (
<Link to="/login" className="btn btn-primary btn-sm">
Login
</Link>
)
)}
</div>
</div>
<DisclosurePanel className="border-t border-base-300 bg-base-100 px-4 py-3 lg:hidden">
<NavLinks variant="mobile" showRegister={!auth} />
<NavLinks variant="mobile" showRegister={showAuthActions} />
</DisclosurePanel>
</>
)}
</Disclosure>
);
};
export default Navbar;