menue #deploy
This commit is contained in:
parent
af6eafdd21
commit
d617eceb7b
@ -15,11 +15,18 @@ const Header = () => {
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const baseUrl = import.meta.env.BASE_URL;
|
||||
|
||||
const privateSubItems = [
|
||||
{
|
||||
name: t('houseAndApartment', 'Haus & Wohnung'),
|
||||
href: '/sachversicherung',
|
||||
icon: Home,
|
||||
},
|
||||
{ name: t('health', 'Gesundheit'), href: '/gesundheitsvorsorge', icon: Shield },
|
||||
];
|
||||
|
||||
const navigation = [
|
||||
{ name: t('home'), href: '/', icon: Home },
|
||||
{ name: t('privateCustomers'), href: '/privatkunden', icon: Users },
|
||||
{ name: t('houseAndApartment', 'Haus & Wohnung'), href: '/sachversicherung', icon: Home },
|
||||
{ name: t('health', 'Gesundheit'), href: '/gesundheitsvorsorge', icon: Shield },
|
||||
{ name: t('familiesAndChildren', 'Familien & Kinder'), href: '/familien-kinder', icon: Users },
|
||||
{ name: t('seniors'), href: '/senioren', icon: Shield },
|
||||
{ name: t('businessCustomers'), href: '/geschaeftskunden', icon: Truck },
|
||||
@ -34,6 +41,7 @@ const Header = () => {
|
||||
const searchItems = [
|
||||
...navigation,
|
||||
...rightMenuItems,
|
||||
...privateSubItems,
|
||||
{ name: t('accidentInsurance', 'Unfall'), href: '/unfall', icon: Shield },
|
||||
{ name: t('carInsurance', 'KFZ'), href: '/kfz', icon: Truck },
|
||||
{ name: t('services', 'Leistungen'), href: '/leistungen', icon: FileText },
|
||||
@ -189,21 +197,61 @@ const Header = () => {
|
||||
<div className="flex flex-wrap items-center gap-2 min-w-0">
|
||||
{navigation.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = location.pathname === item.href;
|
||||
const isPrivatkunden = item.href === '/privatkunden';
|
||||
const isActive = isPrivatkunden
|
||||
? location.pathname === '/privatkunden' || privateSubItems.some((x) => location.pathname.startsWith(x.href))
|
||||
: location.pathname === item.href;
|
||||
|
||||
if (!isPrivatkunden) {
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-semibold transition-colors ${
|
||||
isActive
|
||||
? 'text-blue-600 bg-blue-50'
|
||||
: 'text-gray-700 hover:text-blue-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-5 w-5" strokeWidth={1.25} />
|
||||
<span className="whitespace-nowrap">{item.name}</span>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-semibold transition-colors ${
|
||||
isActive
|
||||
? 'text-blue-600 bg-blue-50'
|
||||
: 'text-gray-700 hover:text-blue-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-5 w-5" strokeWidth={1.25} />
|
||||
<span className="whitespace-nowrap">{item.name}</span>
|
||||
</Link>
|
||||
<div key={item.name} className="relative group">
|
||||
<Link
|
||||
to={item.href}
|
||||
className={`flex items-center space-x-1 px-3 py-2 rounded-md text-sm font-semibold transition-colors ${
|
||||
isActive
|
||||
? 'text-blue-600 bg-blue-50'
|
||||
: 'text-gray-700 hover:text-blue-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-5 w-5" strokeWidth={1.25} />
|
||||
<span className="whitespace-nowrap">{item.name}</span>
|
||||
</Link>
|
||||
|
||||
<div className="absolute left-0 top-full pt-2 opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity z-50">
|
||||
<div className="w-56 rounded-lg border border-gray-200 bg-white shadow-lg overflow-hidden">
|
||||
{privateSubItems.map((sub) => (
|
||||
<Link
|
||||
key={sub.href}
|
||||
to={sub.href}
|
||||
className={`flex items-center gap-2 px-4 py-3 text-sm font-medium transition-colors ${
|
||||
location.pathname.startsWith(sub.href)
|
||||
? 'bg-blue-50 text-blue-700'
|
||||
: 'text-gray-700 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<sub.icon className="h-4 w-4" strokeWidth={1.5} />
|
||||
<span>{sub.name}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
@ -260,19 +308,40 @@ const Header = () => {
|
||||
const isActive = location.pathname === item.href;
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={item.name}
|
||||
to={item.href}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className={`flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
isActive
|
||||
? 'text-blue-600 bg-blue-50'
|
||||
: 'text-gray-700 hover:text-blue-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-5 w-5" strokeWidth={1.25} />
|
||||
<span>{item.name}</span>
|
||||
</Link>
|
||||
<div key={item.name}>
|
||||
<Link
|
||||
to={item.href}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className={`flex items-center space-x-3 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
isActive
|
||||
? 'text-blue-600 bg-blue-50'
|
||||
: 'text-gray-700 hover:text-blue-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<Icon className="h-5 w-5" strokeWidth={1.25} />
|
||||
<span>{item.name}</span>
|
||||
</Link>
|
||||
|
||||
{item.href === '/privatkunden' && (
|
||||
<div className="ml-10 mt-1 flex flex-col">
|
||||
{privateSubItems.map((sub) => (
|
||||
<Link
|
||||
key={sub.href}
|
||||
to={sub.href}
|
||||
onClick={() => setIsMenuOpen(false)}
|
||||
className={`flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors ${
|
||||
location.pathname.startsWith(sub.href)
|
||||
? 'text-blue-600 bg-blue-50'
|
||||
: 'text-gray-700 hover:text-blue-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<sub.icon className="h-4 w-4" strokeWidth={1.5} />
|
||||
<span>{sub.name}</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user