menue #deploy

src/components/Header.tsx

@@ -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,8 +197,12 @@ 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}
@@ -205,6 +217,42 @@ const Header = () => {
                       <span className="whitespace-nowrap">{item.name}</span>
                     </Link>
                   );
+                }
+
+                return (
+                  <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>
           </nav>
@@ -260,8 +308,8 @@ const Header = () => {
                 const isActive = location.pathname === item.href;
 
                 return (
+                  <div key={item.name}>
                     <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 ${
@@ -273,6 +321,27 @@ const Header = () => {
                       <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>