78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { useAuth } from "../auth-context";
|
|
import { sharedStyles } from "../styles/shared";
|
|
|
|
type PageId = "counter" | "sum" | "profile" | "invites" | "audit" | "admin-invites";
|
|
|
|
interface HeaderProps {
|
|
currentPage: PageId;
|
|
}
|
|
|
|
interface NavItem {
|
|
id: PageId;
|
|
label: string;
|
|
href: string;
|
|
regularOnly?: boolean;
|
|
adminOnly?: boolean;
|
|
}
|
|
|
|
const REGULAR_NAV_ITEMS: NavItem[] = [
|
|
{ id: "counter", label: "Counter", href: "/" },
|
|
{ id: "sum", label: "Sum", href: "/sum" },
|
|
{ id: "invites", label: "My Invites", href: "/invites", regularOnly: true },
|
|
{ id: "profile", label: "My Profile", href: "/profile", regularOnly: true },
|
|
];
|
|
|
|
const ADMIN_NAV_ITEMS: NavItem[] = [
|
|
{ id: "audit", label: "Audit", href: "/audit", adminOnly: true },
|
|
{ id: "admin-invites", label: "Invites", href: "/admin/invites", adminOnly: true },
|
|
];
|
|
|
|
export function Header({ currentPage }: HeaderProps) {
|
|
const { user, logout, hasRole } = useAuth();
|
|
const router = useRouter();
|
|
const isRegularUser = hasRole("regular");
|
|
const isAdminUser = hasRole("admin");
|
|
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
router.push("/login");
|
|
};
|
|
|
|
if (!user) return null;
|
|
|
|
// Build nav items based on user role
|
|
// Admin users see admin nav items, regular users see regular nav items
|
|
const navItems = isAdminUser ? ADMIN_NAV_ITEMS : REGULAR_NAV_ITEMS;
|
|
const visibleItems = navItems.filter(
|
|
(item) => (!item.regularOnly || isRegularUser) && (!item.adminOnly || isAdminUser)
|
|
);
|
|
|
|
return (
|
|
<div style={sharedStyles.header}>
|
|
<div style={sharedStyles.nav}>
|
|
{visibleItems.map((item, index) => (
|
|
<span key={item.id}>
|
|
{index > 0 && <span style={sharedStyles.navDivider}>•</span>}
|
|
{item.id === currentPage ? (
|
|
<span style={sharedStyles.navCurrent}>{item.label}</span>
|
|
) : (
|
|
<a href={item.href} style={sharedStyles.navLink}>
|
|
{item.label}
|
|
</a>
|
|
)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<div style={sharedStyles.userInfo}>
|
|
<span style={sharedStyles.userEmail}>{user.email}</span>
|
|
<button onClick={handleLogout} style={sharedStyles.logoutBtn}>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|