AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-10-14 17:54:42 +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

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