feat: admin navigation in header

This commit is contained in:
DeathKaioken 2025-10-16 08:07:31 +02:00
parent ffd7daeb11
commit f93b053569

View File

@ -187,15 +187,22 @@ export default function Header() {
const isLoggedIn = !!user
const userPresent = mounted && isLoggedIn
// NEW: detect admin role across common shapes
const isAdmin =
!!user &&
(
(user as any)?.role === 'admin' ||
(user as any)?.userType === 'admin' ||
(user as any)?.isAdmin === true ||
((user as any)?.roles?.includes?.('admin'))
)
return (
<header
className="relative isolate z-10 border-b border-white/10 shadow-lg shadow-black/30 after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-[radial-gradient(circle_at_20%_20%,rgba(56,124,255,0.18),transparent_55%),radial-gradient(circle_at_80%_35%,rgba(139,92,246,0.16),transparent_60%)]"
// Remove bottom border when admin subheader is present to avoid a blue line under the gold bar
className={`relative isolate z-10 shadow-lg shadow-black/30 after:pointer-events-none after:absolute after:inset-0 after:-z-10 after:bg-[radial-gradient(circle_at_20%_20%,rgba(56,124,255,0.18),transparent_55%),radial-gradient(circle_at_80%_35%,rgba(139,92,246,0.16),transparent_60%)] ${isAdmin ? '' : 'border-b border-white/10'}`}
style={{
// Opaque gradient so page background doesn't shine through
background: 'linear-gradient(135deg, #0F1D37 0%, #0A162A 50%, #081224 100%)',
// Remove blur to avoid backdrop mixing effects
// backdropFilter: 'blur(18px) saturate(170%)',
// WebkitBackdropFilter: 'blur(18px) saturate(170%)'
}}
>
<nav aria-label="Global" className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8">
@ -375,11 +382,41 @@ export default function Header() {
</div>
</nav>
{/* REMOVE sub header bar */}
{/* ...existing code... */}
{/* Deleted previous Sub header nav for Referral Management */}
{/* ...existing code... */}
{/* Admin subheader (gold) - centered */}
{userPresent && isAdmin && (
<div
className="w-full border-t border-amber-700/40"
style={{ background: 'linear-gradient(90deg, #D4AF37 0%, #C99A2E 100%)' }}
>
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="flex flex-wrap items-center justify-center gap-5 py-2">
<span className="text-xs font-semibold uppercase tracking-wide text-[#3B2C04]/80">
Admin Navigation
</span>
<button
onClick={() => { console.log('🧭 Admin: navigate to /admin'); router.push('/admin') }}
className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
>
Dashboard
</button>
<button
onClick={() => { console.log('🧭 Admin: navigate to /admin/user-management'); router.push('/admin/user-management') }}
className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
>
User Management
</button>
<button
onClick={() => { console.log('🧭 Admin: navigate to /admin/user-verify'); router.push('/admin/user-verify') }}
className="text-sm font-semibold text-[#0F1D37] hover:text-[#7A5E1A]"
>
User Verify
</button>
</div>
</div>
</div>
)}
{/* Mobile dialog and rest of header */}
<Dialog open={mobileMenuOpen} onClose={setMobileMenuOpen} className="lg:hidden">
<Transition
appear