From d617eceb7bce189ee1ae3e136753f9579b2972ec Mon Sep 17 00:00:00 2001
From: martin <f95martin@skymail.de>
Date: Fri, 6 Feb 2026 02:22:18 +0100
Subject: [PATCH] menue #deploy

---
 src/components/Header.tsx | 125 +++++++++++++++++++++++++++++---------
 1 file changed, 97 insertions(+), 28 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c31528d..9de7f3b 100644
--- a/src/components/Header.tsx
+++ b/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,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>