From f64264b9300261b09d18a48fedf3231385723c8d Mon Sep 17 00:00:00 2001
From: Marc Wieland <wieland.marc@gmx.de>
Date: Fri, 2 May 2025 18:38:54 +0200
Subject: [PATCH] Navbar gefixt

---
 src/components/Navbar.tsx | 59 ++++++++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 22 deletions(-)

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 02f8261cf..4a466702f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -14,11 +14,13 @@ type Team = {
 const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isTeamsOpen, setIsTeamsOpen] = useState(false);
+  const [isAccountOpen, setIsAccountOpen] = useState(false);
   const { isAuthenticated, username, logout } = useAuth();
   const [teams, setTeams] = useState<Team[]>([]);
   const navigate = useNavigate();
 
   let hoverTimeout: ReturnType<typeof setTimeout>
+  let accountHoverTimeout: ReturnType<typeof setTimeout>
 
   const handleMouseEnter = () => {
     clearTimeout(hoverTimeout);
@@ -86,32 +88,43 @@ const Navbar = () => {
             <button onClick={() => navigateAndScroll("contact")} className="text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">Kontakt</button>
 
             <Link to="/mitglied-werden" className="w-full">
-              <Button className="w-full bg-frog-500 hover:bg-frog-600 text-white">
+              <Button className="bg-frog-500 hover:bg-frog-600 text-white">
                 Mitglied werden
               </Button>
             </Link>
 
-            <div className="relative group ml-4">
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={() => {
-                  if (isAuthenticated) {
-                    navigate("/admin");
-                  } else {
-                    navigate("/admin/login");
-                  }
+            <div
+                className="relative ml-4"
+                onMouseEnter={() => {
+                  clearTimeout(accountHoverTimeout);
+                  setIsAccountOpen(true);
+                }}
+                onMouseLeave={() => {
+                  accountHoverTimeout = setTimeout(() => {
+                    setIsAccountOpen(false);
+                  }, 100);
                 }}
               >
-                <Users className="h-6 w-6 text-frog-600 hover:text-frog-800" />
-              </Button>
+                <div
+                  onClick={() => {
+                    if (isAuthenticated) {
+                      navigate("/admin");
+                    } else {
+                      navigate("/admin/login");
+                    }
+                  }}
+                  className="flex items-center space-x-2 cursor-pointer"
+                >
+                  <Users className="h-6 w-6 text-frog-600 hover:text-frog-800" />
+                  {isAuthenticated && (
+                    <span className="text-sm text-frog-600 hidden md:inline">
+                      {username}
+                    </span>
+                  )}
+                </div>
 
-              {isAuthenticated && (
-                <>
-                  <span className="text-sm text-frog-600 ml-2 hidden md:inline">
-                    {username}
-                  </span>
-                  <div className="absolute right-0 mt-2 hidden group-hover:block bg-white rounded-md shadow-lg z-20 p-2">
+                {isAuthenticated && isAccountOpen && (
+                  <div className="absolute left-0 mt-2 bg-white rounded-md shadow-lg z-20 p-2">
                     <Button
                       variant="ghost"
                       className="w-full text-left text-gray-700 hover:bg-frog-50 hover:text-frog-600"
@@ -123,9 +136,11 @@ const Navbar = () => {
                       Logout
                     </Button>
                   </div>
-                </>
-              )}
-            </div>
+                )}
+              </div>
+
+
+
           </div>
 
           {/* Mobile menu button */}