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 { 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;