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

Navbar,landing, meg a többi frontend javítás

Browse Source
This commit is contained in:
Barni
2025-10-22 15:15:20 +02:00
parent ad5f13a8e1
commit d16d481d86
3 changed files with 58 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
+51 -64
View File
@@ -9,14 +9,12 @@ const navLinkClassPlay =
const Navbar = () => {
const [menuOpen, setMenuOpen] = useState(false)
const navigate = useNavigate()
// Check if authLevel and username exist in localStorage
const isLoggedIn = Boolean(localStorage.getItem("authLevel") && localStorage.getItem("username"))
// Logout function: töröljük az adatokat és navigálunk a /login-ra (SPA, nincs reload)
const handleLogout = () => {
localStorage.removeItem("authLevel")
localStorage.removeItem("username")
navigate("/login")
navigate("/")
}
return (
@@ -32,46 +30,40 @@ const Navbar = () => {
SerpentRace
</Link>
</div>
{/* Desktop Menu */}
<div className="hidden md:flex space-x-8 items-center">
{isLoggedIn ? (
<>
<Link to="/home" className={navLinkClass}>
Home
</Link>
<Link to="/decks" className={navLinkClass}>
Decks
</Link>
<Link to="/report" className={navLinkClass}>
Stats
</Link>
<Link to="/home" className={navLinkClass}>Játék</Link>
<Link to="/decks" className={navLinkClass}>Paklik</Link>
<Link to="/report" className={navLinkClass}>Statisztikák</Link>
</>
) : (
<Link to="/" className={navLinkClass}>
Home
</Link>
<Link to="/" className={navLinkClass}>Főoldal</Link>
)}
<Link to="/about" className={navLinkClass}>
About
</Link>
<Link to="/companies" className={navLinkClass}>
Contact
</Link>
<Link to="/about" className={navLinkClass}>Rólunk</Link>
<Link to="/companies" className={navLinkClass}>Kontakt</Link>
{!isLoggedIn && (
<Link to="/home" className={navLinkClassPlay}>
Play
</Link>
<>
<Link to="/home" className={navLinkClassPlay}>Játék</Link>
<Link
to="/login"
className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
>
Bejelentkezés / Regisztráció
</Link>
</>
)}
{isLoggedIn && (
<button
onClick={handleLogout}
className="ml-4 p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
title="Logout"
className="ml-4 p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
title="Kijelentkezés"
>
{/* Simple logout icon */}
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 text-white"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -80,12 +72,13 @@ const Navbar = () => {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
/>
</svg>
</button>
)}
</div>
{/* Mobile Hamburger */}
<div className="md:hidden flex items-center">
<button
@@ -101,12 +94,7 @@ 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" />
)}
@@ -115,50 +103,49 @@ const Navbar = () => {
</div>
</div>
</div>
{/* Mobile Menu */}
{menuOpen && (
<div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
{isLoggedIn ? (
<Link to="/home" className={navLinkClass}>
Home
</Link>
<Link to="/home" className={navLinkClass}>Home</Link>
) : (
<Link to="/" className={navLinkClass}>
Home
</Link>
<Link to="/" className={navLinkClass}>Főoldal</Link>
)}
<Link to="/leaderboard" className={navLinkClass}>
Leaderboard
</Link>
<Link to="/about" className={navLinkClass}>
About
</Link>
<Link to="/companies" className={navLinkClass}>
Contact
</Link>
<Link to="/leaderboard" className={navLinkClass}>Leaderboard</Link>
<Link to="/about" className={navLinkClass}>Rólunk</Link>
<Link to="/companies" className={navLinkClass}>Kontakt</Link>
{!isLoggedIn && (
<div className="px-2">
<button
onClick={() => {
setMenuOpen(false)
navigate("/home")
}}
className="w-full text-left px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-all"
<>
<div className="px-2">
<button
onClick={() => {
setMenuOpen(false)
navigate("/")
}}
className="w-full text-left px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white transition-all"
>
Játék
</button>
</div>
<Link
to="/login"
className="block px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
>
Játék
</button>
</div>
Bejelentkezés / Regisztráció
</Link>
</>
)}
{isLoggedIn && (
<div className="flex justify-end px-2 pb-2">
<button
onClick={handleLogout}
className="p-2 rounded-full bg-white/10 hover:bg-white/20 transition-all"
title="Logout"
className="p-2 rounded-full bg-[#166534] hover:bg-[#1f7a45] text-white shadow-lg hover:shadow-green-400/40 transition-all transform hover:scale-105 cursor-pointer"
title="Kijelentkezés"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6 text-white"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
@@ -167,7 +154,7 @@ const Navbar = () => {
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a2 2 0 01-2 2H7a2 2 0 01-2-2V7a2 2 0 012-2h4a2 2 0 012 2v1"
d="M10 16l4-4m0 0l-4-4m4 4H3m13 4v1a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2v1"
/>
</svg>
</button>