Seite läuft wieder, menü bringt keine fehler mehr
This commit is contained in:
Codex Agent
@@ -1,26 +1,22 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React from 'react';
|
||||
import { usePage } from '@inertiajs/react';
|
||||
import { Link, router } from '@inertiajs/react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import i18n from '@/i18n';
|
||||
import { useAppearance } from '@/hooks/use-appearance';
|
||||
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
|
||||
import { NavigationMenu, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
|
||||
import { Sun, Moon } from 'lucide-react';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { marketing as marketingRoute, packages as packagesRoute, blog as blogRoute, kontakt as kontaktRoute, login as loginRoute, register as registerRoute, anlaesseType } from '@/routes';
|
||||
|
||||
const Header: React.FC = () => {
|
||||
useEffect(() => {
|
||||
console.log('Header mounted - Inertia initialized?', typeof window.Inertia !== 'undefined' ? 'Yes' : 'No');
|
||||
console.log('Inertia links on page:', document.querySelectorAll('a[data-inertia]').length);
|
||||
}, []);
|
||||
const { auth, locale } = usePage().props as any;
|
||||
const { t } = useTranslation('auth');
|
||||
const { appearance, updateAppearance } = useAppearance();
|
||||
const { localizedPath } = useLocalizedRoutes();
|
||||
|
||||
const toggleTheme = () => {
|
||||
const newAppearance = appearance === 'dark' ? 'light' : 'dark';
|
||||
@@ -28,114 +24,80 @@ const Header: React.FC = () => {
|
||||
};
|
||||
|
||||
const handleLanguageChange = (value: string) => {
|
||||
router.post(
|
||||
'/set-locale',
|
||||
{ locale: value },
|
||||
{
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
onSuccess: () => {
|
||||
i18n.changeLanguage(value);
|
||||
},
|
||||
router.post('/set-locale', { locale: value }, {
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
onSuccess: () => {
|
||||
i18n.changeLanguage(value);
|
||||
},
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
const handleLogout = () => {
|
||||
router.post('/logout');
|
||||
};
|
||||
|
||||
const occasionUrl = (typeKey: 'hochzeit' | 'geburtstag' | 'firmenevent') =>
|
||||
`/anlaesse/${typeKey}`;
|
||||
|
||||
return (
|
||||
<header className="fixed top-0 z-50 w-full bg-white/95 dark:bg-gray-900/95 backdrop-blur-md shadow-lg border-b border-gray-200/50 dark:border-gray-700/50">
|
||||
<div className="container mx-auto px-4 py-3">
|
||||
<header className="fixed top-0 z-50 w-full bg-white dark:bg-gray-900 shadow-lg border-b-2 border-gray-200 dark:border-gray-700">
|
||||
<div className="container mx-auto px-4 py-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<Link
|
||||
href={marketingRoute().url}
|
||||
className="text-2xl font-bold text-gray-800 dark:text-gray-200 hover:text-pink-500 dark:hover:text-pink-400 transition-colors duration-200"
|
||||
>
|
||||
<Link href="{localizedPath('/')}" className="text-2xl font-bold text-gray-800 dark:text-gray-200">
|
||||
Fotospiel
|
||||
</Link>
|
||||
<NavigationMenu className="hidden md:flex">
|
||||
<NavigationMenuList className="space-x-1">
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink href={marketingRoute().url} className={cn(
|
||||
navigationMenuTriggerStyle(),
|
||||
"text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
|
||||
)}>
|
||||
{t('header.home', 'Home')}
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink href={packagesRoute().url} className={cn(
|
||||
navigationMenuTriggerStyle(),
|
||||
"text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
|
||||
)}>
|
||||
{t('header.packages', 'Pakete')}
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink href={blogRoute().url} className={cn(
|
||||
navigationMenuTriggerStyle(),
|
||||
"text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
|
||||
)}>
|
||||
{t('header.blog', 'Blog')}
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200">
|
||||
Anlässe
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-lg rounded-xl">
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={occasionUrl('hochzeit')} className="w-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
|
||||
{t('header.occasions.wedding', 'Hochzeit')}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={occasionUrl('geburtstag')} className="w-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
|
||||
{t('header.occasions.birthday', 'Geburtstag')}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={occasionUrl('firmenevent')} className="w-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
|
||||
{t('header.occasions.corporate', 'Firmenevent')}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</NavigationMenuItem>
|
||||
<NavigationMenuItem>
|
||||
<NavigationMenuLink href={kontaktRoute().url} className={cn(
|
||||
navigationMenuTriggerStyle(),
|
||||
"text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg bg-transparent hover:bg-pink-50 dark:hover:bg-pink-900/20 rounded-md px-3 py-2 transition-all duration-200"
|
||||
)}>
|
||||
{t('header.contact', 'Kontakt')}
|
||||
</NavigationMenuLink>
|
||||
</NavigationMenuItem>
|
||||
</NavigationMenuList>
|
||||
</NavigationMenu>
|
||||
<nav className="flex space-x-8">
|
||||
<Link href={localizedPath('/')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
|
||||
{t('header.home', 'Home')}
|
||||
</Link>
|
||||
<Link href={localizedPath('/packages')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
|
||||
{t('header.packages', 'Pakete')}
|
||||
</Link>
|
||||
<Link href={localizedPath('/blog')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
|
||||
{t('header.blog', 'Blog')}
|
||||
</Link>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
|
||||
Anlässe
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={localizedPath('/anlaesse/hochzeit')} className="w-full flex items-center">
|
||||
{t('header.occasions.wedding', 'Hochzeit')}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={localizedPath('/anlaesse/geburtstag')} className="w-full flex items-center">
|
||||
{t('header.occasions.birthday', 'Geburtstag')}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href={localizedPath('/anlaesse/firmenevent')} className="w-full flex items-center">
|
||||
{t('header.occasions.corporate', 'Firmenevent')}
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<Link href={localizedPath('/kontakt')} className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white font-sans-marketing text-lg">
|
||||
{t('header.contact', 'Kontakt')}
|
||||
</Link>
|
||||
</nav>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={toggleTheme}
|
||||
className="h-8 w-8 hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200"
|
||||
className="h-8 w-8"
|
||||
>
|
||||
<Sun className={cn("h-4 w-4", appearance === "dark" && "hidden")} />
|
||||
<Moon className={cn("h-4 w-4", appearance !== "dark" && "hidden")} />
|
||||
<span className="sr-only">Theme Toggle</span>
|
||||
</Button>
|
||||
<Select value={locale} onValueChange={handleLanguageChange}>
|
||||
<SelectTrigger className="w-[70px] h-8 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 hover:bg-pink-50 dark:hover:bg-pink-900/20">
|
||||
<SelectTrigger className="w-[70px] h-8">
|
||||
<SelectValue placeholder="DE" />
|
||||
</SelectTrigger>
|
||||
<SelectContent className="bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700">
|
||||
<SelectContent>
|
||||
<SelectItem value="de">DE</SelectItem>
|
||||
<SelectItem value="en">EN</SelectItem>
|
||||
</SelectContent>
|
||||
@@ -143,33 +105,33 @@ const Header: React.FC = () => {
|
||||
{auth.user ? (
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="relative h-8 w-8 rounded-full hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
|
||||
<Button variant="ghost" className="relative h-8 w-8 rounded-full">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarImage src={auth.user?.avatar} alt={auth.user?.name || 'User'} />
|
||||
<AvatarFallback className="bg-pink-100 dark:bg-pink-900 text-pink-600 dark:text-pink-400">{(auth.user?.name || auth.user?.email || 'U').charAt(0)}</AvatarFallback>
|
||||
<AvatarFallback>{(auth.user?.name || auth.user?.email || 'U').charAt(0)}</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-56 bg-white dark:bg-gray-800 border-gray-200 dark:border-gray-700 shadow-lg rounded-xl" align="end" forceMount>
|
||||
<DropdownMenuContent className="w-56" align="end" forceMount>
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col space-y-1">
|
||||
<p className="text-sm font-medium leading-none text-gray-900 dark:text-gray-100">{auth.user?.name || auth.user?.email || 'User'}</p>
|
||||
<p className="text-xs leading-none text-gray-500 dark:text-gray-400">{auth.user?.email || ''}</p>
|
||||
<p className="text-sm font-medium leading-none">{auth.user?.name || auth.user?.email || 'User'}</p>
|
||||
<p className="text-xs leading-none text-muted-foreground">{auth.user?.email || ''}</p>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator className="bg-gray-200 dark:bg-gray-700" />
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/profile" className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
|
||||
<Link href={localizedPath('/profile')}>
|
||||
Profil
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/profile/orders" className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
|
||||
<Link href={localizedPath('/profile/orders')}>
|
||||
Bestellungen
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator className="bg-gray-200 dark:bg-gray-700" />
|
||||
<DropdownMenuItem onClick={handleLogout} className="hover:bg-pink-50 dark:hover:bg-pink-900/20 transition-colors duration-200">
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuItem onClick={handleLogout}>
|
||||
Abmelden
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
@@ -177,14 +139,14 @@ const Header: React.FC = () => {
|
||||
) : (
|
||||
<>
|
||||
<Link
|
||||
href={loginRoute().url}
|
||||
className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white hover:bg-pink-50 dark:hover:bg-pink-900/20 px-3 py-2 rounded-md transition-all duration-200"
|
||||
href={localizedPath('/login')}
|
||||
className="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white"
|
||||
>
|
||||
{t('header.login')}
|
||||
</Link>
|
||||
<Link
|
||||
href={registerRoute().url}
|
||||
className="bg-pink-500 hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700 text-white px-4 py-2 rounded-md transition-all duration-200 shadow-md hover:shadow-lg"
|
||||
href={localizedPath('/register')}
|
||||
className="bg-pink-500 text-white px-4 py-2 rounded hover:bg-pink-600 dark:bg-pink-600 dark:hover:bg-pink-700"
|
||||
>
|
||||
{t('header.register')}
|
||||
</Link>
|
||||
|
||||
Reference in New Issue
Block a user