Donat/SerpentRace
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Handlenavigate

Browse Source
This commit is contained in:
Barni03
2025-10-26 17:46:21 +01:00
parent 18110ba410
commit 94943d4988
4 changed files with 126 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
+62 -30
View File
@@ -1,20 +1,26 @@
import React, { useState } from "react"
import Logo from "../../assets/pictures/Logo"
import { Link, useNavigate } from "react-router-dom"
import { Link } from "react-router-dom"
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate"// ✅ importáld a navigációs hookot
const navLinkClass = "px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
const navLinkClass =
"px-3 py-2 rounded-lg text-white transition-all duration-200 hover:bg-white/10"
const navLinkClassPlay =
"px-4 py-2 rounded-lg text-white bg-white/12 hover:bg-white/20 transition-all duration-200"
const Navbar = () => {
const [menuOpen, setMenuOpen] = useState(false)
const navigate = useNavigate()
const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))
const isLoggedIn = Boolean(
localStorage.getItem("authLevel") && localStorage.getItem("username")
)
// ✅ Használjuk a HandleNavigate hookot
const { goLanding, goAbout, goHome, goLogin, goContacts } = HandleNavigate()
// ✅ Logout logika
const handleLogout = () => {
localStorage.removeItem("authLevel")
localStorage.removeItem("username")
navigate("/")
localStorage.clear()
goLanding()
}
return (
@@ -23,41 +29,56 @@ const Navbar = () => {
<div className="flex justify-between h-16 items-center">
{/* Logo + Brand */}
<div className="flex-shrink-0 flex items-center gap-2">
<Link to="/" className="flex items-center mt-1 h-9">
<button onClick={goLanding} className="flex items-center mt-1 h-9">
<Logo size={36} />
</Link>
<Link to="/" className="flex items-center h-9 text-white font-bold text-2xl tracking-tight">
</button>
<button
onClick={goLanding}
className="flex items-center h-9 text-white font-bold text-2xl tracking-tight"
>
SerpentRace
</Link>
</button>
</div>
{/* Desktop Menu */}
<div className="hidden md:flex items-center space-x-6">
{/* Bal oldali linkek */}
<Link to="/" className={navLinkClass}>Főoldal</Link>
<Link to="/about" className={navLinkClass}>Rólunk</Link>
<Link to="/contacts" className={navLinkClass}>Kapcsolat</Link>
<button onClick={goLanding} className={navLinkClass}>
Főoldal
</button>
<button onClick={goAbout} className={navLinkClass}>
Rólunk
</button>
<button onClick={goContacts} className={navLinkClass}>
Kapcsolat
</button>
{/* Csak bejelentkezve */}
{isLoggedIn && (
<>
<Link to="/decks" className={navLinkClass}>Paklik</Link>
<Link to="/report" className={navLinkClass}>Statisztikák</Link>
<Link to="/decks" className={navLinkClass}>
Paklik
</Link>
<Link to="/report" className={navLinkClass}>
Statisztikák
</Link>
</>
)}
{/* Játék gomb */}
<Link to="/home" className={navLinkClassPlay}>Játék</Link>
<button onClick={goHome} className={navLinkClassPlay}>
Játék
</button>
{/* Jobb oldali akciók */}
{!isLoggedIn ? (
<div className="flex items-center space-x-4">
<Link
to="/login"
<button
onClick={goLogin}
className="px-4 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
>
Bejelentkezés
</Link>
</button>
{/* Elválasztó vonal */}
<div className="w-px h-10 bg-white/100"></div>
@@ -108,9 +129,19 @@ const Navbar = () => {
xmlns="http://www.w3.org/2000/svg"
>
{menuOpen ? (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M6 18L18 6M6 6l12 12"
/>
) : (
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8h16M4 16h16" />
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M4 8h16M4 16h16"
/>
)}
</svg>
</button>
@@ -121,26 +152,27 @@ const Navbar = () => {
{/* Mobile Menu */}
{menuOpen && (
<div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
<Link to="/" onClick={() => setMenuOpen(false)} className={navLinkClass}>Főoldal</Link>
<Link to="/about" onClick={() => setMenuOpen(false)} className={navLinkClass}>Rólunk</Link>
<Link to="/contacts" onClick={() => setMenuOpen(false)} className={navLinkClass}>Kapcsolat</Link>
<button onClick={() => { goLanding(); setMenuOpen(false) }} className={navLinkClass}>Főoldal</button>
<button onClick={() => { goAbout(); setMenuOpen(false) }} className={navLinkClass}>Rólunk</button>
<button onClick={() => { goContacts(); setMenuOpen(false) }} className={navLinkClass}>Kapcsolat</button>
{isLoggedIn && (
<>
<Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>Paklik</Link>
<Link to="/report" onClick={() => setMenuOpen(false)} className={navLinkClass}>Statisztikák</Link>
</>
)}
<Link to="/home" onClick={() => setMenuOpen(false)} className={navLinkClassPlay}>Játék</Link>
<button onClick={() => { goHome(); setMenuOpen(false) }} className={navLinkClassPlay}>Játék</button>
{!isLoggedIn ? (
<div className="flex flex-col space-y-2">
<Link
to="/login"
onClick={() => setMenuOpen(false)}
<button
onClick={() => { goLogin(); setMenuOpen(false) }}
className="block px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
>
Bejelentkezés
</Link>
</button>
{/* Elválasztó vonal mobilon */}
<div className="w-full h-px bg-white/30"></div>