mrcwlnd/volleyball-dev-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Navbar gefixt
Some checks failed
Deploy Volleyball Dev / deploy (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Marc Wieland 2025-05-02 18:38:54 +02:00
parent bf53e957ac
commit f64264b930
1 changed files with 37 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/Navbar.tsx
View File

@ -14,11 +14,13 @@ type Team = {
const Navbar = () => { const Navbar = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false); const [isMenuOpen, setIsMenuOpen] = useState(false);
const [isTeamsOpen, setIsTeamsOpen] = useState(false); const [isTeamsOpen, setIsTeamsOpen] = useState(false);
const [isAccountOpen, setIsAccountOpen] = useState(false);
const { isAuthenticated, username, logout } = useAuth(); const { isAuthenticated, username, logout } = useAuth();
const [teams, setTeams] = useState<Team[]>([]); const [teams, setTeams] = useState<Team[]>([]);
const navigate = useNavigate(); const navigate = useNavigate();
let hoverTimeout: ReturnType<typeof setTimeout> let hoverTimeout: ReturnType<typeof setTimeout>
let accountHoverTimeout: ReturnType<typeof setTimeout>
const handleMouseEnter = () => { const handleMouseEnter = () => {
clearTimeout(hoverTimeout); clearTimeout(hoverTimeout);
@ -86,15 +88,24 @@ const Navbar = () => {
<button onClick={() => navigateAndScroll("contact")} className="text-gray-700 hover:text-frog-600 px-3 py-2 rounded-md font-medium">Kontakt</button> <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"> <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 Mitglied werden
</Button> </Button>
</Link> </Link>
<div className="relative group ml-4"> <div
<Button className="relative ml-4"
variant="ghost" onMouseEnter={() => {
size="icon" clearTimeout(accountHoverTimeout);
setIsAccountOpen(true);
}}
onMouseLeave={() => {
accountHoverTimeout = setTimeout(() => {
setIsAccountOpen(false);
}, 100);
}}
>
<div
onClick={() => { onClick={() => {
if (isAuthenticated) { if (isAuthenticated) {
navigate("/admin"); navigate("/admin");
@ -102,16 +113,18 @@ const Navbar = () => {
navigate("/admin/login"); 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" /> <Users className="h-6 w-6 text-frog-600 hover:text-frog-800" />
</Button>
{isAuthenticated && ( {isAuthenticated && (
<> <span className="text-sm text-frog-600 hidden md:inline">
<span className="text-sm text-frog-600 ml-2 hidden md:inline">
{username} {username}
</span> </span>
<div className="absolute right-0 mt-2 hidden group-hover:block bg-white rounded-md shadow-lg z-20 p-2"> )}
</div>
{isAuthenticated && isAccountOpen && (
<div className="absolute left-0 mt-2 bg-white rounded-md shadow-lg z-20 p-2">
<Button <Button
variant="ghost" variant="ghost"
className="w-full text-left text-gray-700 hover:bg-frog-50 hover:text-frog-600" className="w-full text-left text-gray-700 hover:bg-frog-50 hover:text-frog-600"
@ -123,9 +136,11 @@ const Navbar = () => {
Logout Logout
</Button> </Button>
</div> </div>
</>
)} )}
</div> </div>
</div> </div>
{/* Mobile menu button */} {/* Mobile menu button */}