Initial commit

Next.js + Express event management app for Hope Family Church.
2026-07-23 15:26:47 +02:00
commit 3d381944d2
246 changed files with 57565 additions and 0 deletions
@@ -0,0 +1,115 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useAuth } from "@/hooks/useAuth";
+import { useSiteSettings } from "@/contexts/SiteSettingsContext";
+import { BottomNav } from "./BottomNav";
+import churchLogo from "@/app/church_logo.jpg";
+import { appName, brandColor } from "@/lib/siteConfig";
+import { resolveToApiOrigin } from "@/lib/api";
+
+type NavLink = {
+    href: string;
+    label: string;
+    onClick?: () => void;
+};
+
+export const Navbar = () => {
+    const { user, loading: authLoading, logout } = useAuth();
+    const { settings, loading: settingsLoading } = useSiteSettings();
+    const displayName  = settings.org_name  || appName;
+    const displayColor = settings.accent_color || brandColor;
+    const logoSrc      = settings.logo_url ? resolveToApiOrigin(settings.logo_url) : null;
+
+    const handleLogout = () => {
+        logout();
+        window.location.href = "/";
+    };
+
+    const navLinks: NavLink[] = [
+        { href: "/", label: "Home" },
+        { href: "/events", label: "Events" },
+        { href: "/#contact", label: "Contact" },
+    ];
+
+    const authLinks: NavLink[] = user
+        ? [
+            { href: "/dashboard", label: "Dashboard" },
+            {
+                href: "#",
+                label: "Logout",
+                onClick: handleLogout,
+            },
+        ]
+        : [
+            { href: "/login", label: "Login" },
+            { href: "/register", label: "Register" },
+        ];
+
+    return (
+        <>
+            <header className="bg-white shadow-md sticky top-0 z-50">
+                <nav className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
+                    <Link href="/" className="flex items-center gap-2">
+                        {settingsLoading ? (
+                            <div className="h-10 w-10 rounded-sm bg-gray-100 animate-pulse" />
+                        ) : logoSrc ? (
+                            // eslint-disable-next-line @next/next/no-img-element
+                            <img src={logoSrc} alt="Logo" className="h-10 w-auto object-contain rounded-sm" />
+                        ) : (
+                            <Image
+                                src={churchLogo}
+                                alt="Church logo"
+                                width={50}
+                                height={50}
+                                className="rounded-sm object-contain"
+                                priority
+                            />
+                        )}
+                        {!settingsLoading && (
+                            <span className="text-xl font-bold" style={{ color: displayColor }}>{displayName}</span>
+                        )}
+                    </Link>
+
+                    {/* Desktop links */}
+                    <div className="hidden md:flex items-center space-x-6">
+                        {navLinks.map(link => (
+                            <Link
+                                key={link.href}
+                                href={link.href}
+                                className="text-sm text-gray-700 hover:text-blue-600"
+                            >
+                                {link.label}
+                            </Link>
+                        ))}
+
+                        {/* Auth links are only known once the token has been validated —
+                            rendering nothing here (instead of guessing "logged out") avoids
+                            a Login/Register -> Dashboard/Logout flash on every load. */}
+                        {!authLoading && authLinks.map(link =>
+                            link.onClick ? (
+                                <button
+                                    key={link.label}
+                                    onClick={link.onClick}
+                                    className="text-sm text-gray-700 hover:text-blue-600"
+                                >
+                                    {link.label}
+                                </button>
+                            ) : (
+                                <Link
+                                    key={link.href}
+                                    href={link.href}
+                                    className="text-sm text-gray-700 hover:text-blue-600"
+                                >
+                                    {link.label}
+                                </Link>
+                            )
+                        )}
+                    </div>
+                </nav>
+            </header>
+            <BottomNav />
+        </>
+    );
+};