"use client";
import Link from "next/link";
import React from "react";
import Image from "next/image";
import { usePathname } from "next/navigation";
import { useBaseRoms } from "@/contexts/BaseRomContext";
import { useAuthContext } from "@/contexts/AuthContext";
import { createClient } from "@/utils/supabase/client";
import Avatar from "@/components/Account/Avatar";
function NavLink({ href, label, className = "", onClick }: { href: string; label: React.ReactNode; className?: string; onClick?: () => void }) {
const pathname = usePathname();
const isActive = pathname === href;
return (
{label}
);
}
export default function Header() {
const { countReady } = useBaseRoms();
const { user } = useAuthContext();
const pathname = usePathname();
const supabase = createClient();
const [isAuthenticated, setIsAuthenticated] = React.useState(false);
const [userId, setUserId] = React.useState(null);
const [avatarUrl, setAvatarUrl] = React.useState(null);
const [isMobileMenuOpen, setIsMobileMenuOpen] = React.useState(false);
React.useEffect(() => {
let isMounted = true;
(async () => {
const { data } = await supabase.auth.getUser();
if (!isMounted) return;
const authed = Boolean(data.user);
setIsAuthenticated(authed);
setUserId(data.user?.id ?? null);
// Best-effort fetch profile avatar_url for header avatar
if (authed && data.user?.id) {
const { data: profile } = await supabase
.from('profiles')
.select('avatar_url')
.eq('id', data.user.id)
.single();
setAvatarUrl(profile?.avatar_url ?? null);
} else {
setAvatarUrl(null);
}
})();
return () => {
isMounted = false;
};
}, [supabase, user]);
// Close mobile menu on route change for better UX
React.useEffect(() => {
setIsMobileMenuOpen(false);
}, [pathname]);
// Lock background scroll when mobile menu is open
React.useEffect(() => {
if (isMobileMenuOpen) {
const original = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => {
document.body.style.overflow = original;
};
}
}, [isMobileMenuOpen]);
// Close on Escape key
React.useEffect(() => {
if (!isMobileMenuOpen) return;
const onKeyDown = (e: KeyboardEvent) => {
if (e.key === "Escape") setIsMobileMenuOpen(false);
};
window.addEventListener("keydown", onKeyDown);
return () => window.removeEventListener("keydown", onKeyDown);
}, [isMobileMenuOpen]);
return (
Hackdex
Beta
{/* Mobile menu panel (animated) */}
setIsMobileMenuOpen(false)} />
setIsMobileMenuOpen(false)}
label={
My Base ROMs
{countReady}
}
/>
setIsMobileMenuOpen(false)}
/>
{isAuthenticated && (
setIsMobileMenuOpen(false)}
data-active={pathname === "/account" || undefined}
className="mt-1 inline-flex items-center gap-3 rounded-md px-3 py-3 ring-1 ring-[var(--border)]"
aria-label="Open account"
title="Account"
>
Account
)}
{/* Scrim overlay */}
);
}