238 lines
8.7 KiB
TypeScript
238 lines
8.7 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/navigation";
|
|
import { createBrowserClient } from "@supabase/ssr";
|
|
import { type User } from "@supabase/supabase-js";
|
|
import { Rocket, Menu, X, User as UserIcon, LogOut } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
interface NavbarClientProps {
|
|
user: User | null;
|
|
}
|
|
|
|
export function NavbarClient({ user }: NavbarClientProps) {
|
|
const router = useRouter();
|
|
const [currentUser, setCurrentUser] = useState<User | null>(user);
|
|
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
const [open, setOpen] = useState(false);
|
|
|
|
// Supabase URL & Anon Key auslesen (für Browser-Client)
|
|
const supabaseUrl = process.env.SUPABASE_URL || process.env.NEXT_PUBLIC_SUPABASE_URL;
|
|
const supabaseAnonKey = process.env.SUPABASE_ANON_KEY || process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY || process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
|
|
|
|
// Supabase URL Auflösung inline
|
|
let resolvedUrl = supabaseUrl;
|
|
if (resolvedUrl && typeof window !== "undefined") {
|
|
try {
|
|
const parsed = new URL(resolvedUrl);
|
|
if (parsed.hostname === "supabase-kong" || parsed.hostname === "kong") {
|
|
parsed.hostname = window.location.hostname;
|
|
resolvedUrl = parsed.toString().replace(/\/$/, "");
|
|
}
|
|
} catch {
|
|
resolvedUrl = resolvedUrl
|
|
.replace("//supabase-kong", `//${window.location.hostname}`)
|
|
.replace("//kong", `//${window.location.hostname}`);
|
|
}
|
|
}
|
|
|
|
// Browser Client inline erstellen
|
|
const supabase = createBrowserClient(
|
|
resolvedUrl!,
|
|
supabaseAnonKey!,
|
|
{
|
|
cookieOptions: {
|
|
name: "webshop-auth-token",
|
|
},
|
|
}
|
|
);
|
|
|
|
// Auf Auth-Statusänderungen reagieren
|
|
useEffect(() => {
|
|
const {
|
|
data: { subscription },
|
|
} = supabase.auth.onAuthStateChange((event, session) => {
|
|
setCurrentUser(session?.user ?? null);
|
|
});
|
|
|
|
return () => {
|
|
subscription.unsubscribe();
|
|
};
|
|
}, [supabase]);
|
|
|
|
useEffect(() => {
|
|
const checkBanner = () => {
|
|
const disabled = localStorage.getItem('demo_banner_disabled') === 'true';
|
|
const banner = document.getElementById('demo-banner');
|
|
if (banner) banner.style.display = disabled ? 'none' : 'block';
|
|
};
|
|
|
|
checkBanner();
|
|
window.addEventListener('storage_demo_changed', checkBanner);
|
|
return () => window.removeEventListener('storage_demo_changed', checkBanner);
|
|
}, []);
|
|
|
|
const handleSignOut = async () => {
|
|
await supabase.auth.signOut();
|
|
setCurrentUser(null);
|
|
setIsMobileMenuOpen(false);
|
|
router.refresh();
|
|
router.push("/");
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<header className="px-4 lg:px-6 h-16 flex items-center justify-between border-b border-white/5 backdrop-blur-md sticky top-0 z-50 bg-[#020617]/85">
|
|
<Link className="flex items-center justify-center gap-2 group" href="/">
|
|
<span className="font-bold text-xl tracking-tighter text-white">CASPOS Store</span>
|
|
<span className="text-[10px] bg-amber-500/20 text-amber-400 px-2 py-0.5 rounded-full font-semibold uppercase tracking-wider border border-amber-500/30">
|
|
Demo
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<nav className="hidden md:flex gap-6 items-center">
|
|
<Link className="text-sm font-medium text-slate-300 hover:text-primary transition-colors" href="/order">
|
|
Bestellen
|
|
</Link>
|
|
<Link
|
|
className="text-sm font-medium text-slate-300 hover:text-primary transition-colors"
|
|
href="https://wiki.caspos.de"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Wiki
|
|
</Link>
|
|
<Link
|
|
className="text-sm font-medium text-slate-300 hover:text-primary transition-colors"
|
|
href="https://support.caspos.de"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Support
|
|
</Link>
|
|
|
|
<div className="h-4 w-px bg-white/10 mx-2" />
|
|
|
|
{currentUser ? (
|
|
<div className="relative">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setOpen(!open)}
|
|
className="border-white/10 hover:bg-white/5 gap-2 text-white"
|
|
>
|
|
<UserIcon className="w-4 h-4 text-primary" />
|
|
<span className="max-w-[120px] truncate">{currentUser.email}</span>
|
|
</Button>
|
|
{open && (
|
|
<div className="absolute right-0 mt-2 w-48 rounded-xl border p-2 shadow-xl z-50 bg-white text-slate-900 border-slate-200 dark:bg-slate-950 dark:text-white dark:border-white/10">
|
|
<div className="px-3 py-1.5 text-[11px] truncate border-b text-slate-400 border-slate-100 dark:border-white/5 mb-1">
|
|
{currentUser.email}
|
|
</div>
|
|
<Link
|
|
href="/account-kunden"
|
|
onClick={() => setOpen(false)}
|
|
className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
|
|
>
|
|
Account Einstellungen
|
|
</Link>
|
|
<Link
|
|
href="/my-customers"
|
|
onClick={() => setOpen(false)}
|
|
className="block px-3 py-2 text-sm rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5"
|
|
>
|
|
Kundenliste
|
|
</Link>
|
|
<hr className="my-1 border-slate-100 dark:border-white/5" />
|
|
<button
|
|
onClick={handleSignOut}
|
|
className="w-full text-left px-3 py-2 text-sm font-bold text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-lg"
|
|
>
|
|
Abmelden
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
) : (
|
|
<Button asChild className="bg-primary hover:bg-primary/95 text-white dark:text-blue-500">
|
|
<Link href="/login">Anmelden</Link>
|
|
</Button>
|
|
)}
|
|
</nav>
|
|
|
|
{/* Mobile Hamburger Trigger */}
|
|
<button
|
|
className="md:hidden p-2 text-slate-300 hover:text-white focus:outline-none"
|
|
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
|
|
>
|
|
{isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
|
|
</button>
|
|
</header>
|
|
|
|
{/* Mobile Menu Panel */}
|
|
{isMobileMenuOpen && (
|
|
<div className="md:hidden fixed inset-x-0 top-16 bg-[#020617] border-b border-white/5 z-40 py-4 px-6 flex flex-col gap-4 animate-in slide-in-from-top duration-200">
|
|
<Link
|
|
className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
|
|
href="/order"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
Bestellen
|
|
</Link>
|
|
<Link
|
|
className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
|
|
href="https://caspos.de"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
Wiki
|
|
</Link>
|
|
<Link
|
|
className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
|
|
href="https://caspos.de"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
Support
|
|
</Link>
|
|
|
|
{currentUser && (
|
|
<>
|
|
<div className="h-px bg-white/5 my-1" />
|
|
<div className="text-xs text-slate-500 px-1">Mein Account ({currentUser.email})</div>
|
|
<Link
|
|
className="text-lg font-medium text-slate-300 hover:text-white transition-colors py-2"
|
|
href="/my-customers"
|
|
onClick={() => setIsMobileMenuOpen(false)}
|
|
>
|
|
Account Kunden
|
|
</Link>
|
|
</>
|
|
)}
|
|
|
|
<div className="h-px bg-white/5 my-1" />
|
|
|
|
{currentUser ? (
|
|
<Button
|
|
variant="destructive"
|
|
className="w-full flex items-center justify-center gap-2"
|
|
onClick={handleSignOut}
|
|
>
|
|
<LogOut className="w-4 h-4" /> Abmelden
|
|
</Button>
|
|
) : (
|
|
<Button asChild className="w-full bg-primary hover:bg-primary/95 text-white dark:text-blue-500" onClick={() => setIsMobileMenuOpen(false)}>
|
|
<Link href="/login">Anmelden</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|