Neue Version Navbar

src/components/Navbar.tsx

@@ -1,15 +1,36 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Button } from "@/components/ui/button";
 import { Menu, X, Volleyball, ChevronDown, Users } from "lucide-react";
 import { Link, useNavigate } from "react-router-dom";
 import { useAuth } from '@/context/AuthContext';
+import axios from 'axios';
+
+
+type Team = {
+  id: number;
+  name: string;
+}
 
 const Navbar = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [isTeamsOpen, setIsTeamsOpen] = useState(false);
   const { isAuthenticated, username, logout } = useAuth();
+  const [teams, setTeams] = useState<Team[]>([]);
   const navigate = useNavigate();
 
+  let hoverTimeout: ReturnType<typeof setTimeout>
+
+  const handleMouseEnter = () => {
+    clearTimeout(hoverTimeout);
+    setIsTeamsOpen(true);
+  }
+
+  const handleMouseLeave = () => {
+    hoverTimeout = setTimeout(() => {
+      setIsTeamsOpen(false);
+    }, 100);
+  };
+
   const toggleMenu = () => {
     setIsMenuOpen(!isMenuOpen);
   };
@@ -41,10 +62,10 @@ const Navbar = () => {
 
             <div
               className="relative"
-              onMouseEnter={() => setIsTeamsOpen(true)}
-              onMouseLeave={() => setIsTeamsOpen(false)}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
             >
-              <button className="flex items-center text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium focus:outline-none">
+              <button className="flex items-center text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">
                 Teams
                 <ChevronDown className="ml-1 h-4 w-4" />
               </button>
@@ -59,6 +80,7 @@ const Navbar = () => {
               )}
             </div>
 
+
             <button onClick={() => navigateAndScroll("gallery")} className="text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">Galerie</button>
             <button onClick={() => navigateAndScroll("about")} className="text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">Über uns</button>
             <button onClick={() => navigateAndScroll("contact")} className="text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">Kontakt</button>