AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-10-15 01:54:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Hide the navbar auth actions on the login and register routes

Browse Source
This commit is contained in:
Aaron Po
2026-10-13 01:32:28 -04:00
parent 5ac55b8be0
commit 0ecc9a830e
1 changed files with 81 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
web/frontend/app/components/ui/navbar/Navbar.tsx
View File

@@ -1,5 +1,5 @@
import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'; import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
import { Link } from 'react-router'; import { Link, useLocation } from 'react-router';
import NavLinks from './NavLinks'; import NavLinks from './NavLinks';
import UserMenu from './UserMenu'; import UserMenu from './UserMenu';
@@ -12,7 +12,12 @@ interface NavbarProps {
} | null; } | null;
} }
const Navbar = ({ auth }: NavbarProps) => ( const Navbar = ({ auth }: NavbarProps) => {
const { pathname } = useLocation();
const onAuthRoute = pathname === '/login' || pathname === '/register';
const showAuthActions = !auth && !onAuthRoute;
return (
<Disclosure <Disclosure
as="nav" as="nav"
className="sticky top-0 z-50 border-b border-base-300 bg-base-100 shadow-md" 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> </Link>
</div> </div>
<NavLinks variant="desktop" showRegister={!auth} /> <NavLinks variant="desktop" showRegister={showAuthActions} />
<div className="navbar-end gap-2"> <div className="navbar-end gap-2">
{!auth && ( {showAuthActions && (
<Link <Link
to="/register" to="/register"
className="btn btn-ghost btn-sm hidden sm:inline-flex" 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"> <Link to="/login" className="btn btn-primary btn-sm">
Login Login
</Link> </Link>
)
)} )}
</div> </div>
</div> </div>
<DisclosurePanel className="border-t border-base-300 bg-base-100 px-4 py-3 lg:hidden"> <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> </DisclosurePanel>
</> </>
)} )}
</Disclosure> </Disclosure>
); );
};
export default Navbar; export default Navbar;