256 lines
9.0 KiB
React
256 lines
9.0 KiB
React
import React, { useState } from "react"
|
|
import Logo from "../../assets/pictures/Logo"
|
|
import { Link } from "react-router-dom"
|
|
import HandleNavigate from "../../utils/HandleNavigate/HandleNavigate" // ✅ importáld a navigációs hookot
|
|
import { FaSignOutAlt, FaChartBar, FaUser, FaBars } from "react-icons/fa"
|
|
|
|
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 [userMenuOpen, setUserMenuOpen] = useState(false)
|
|
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.clear()
|
|
goLanding()
|
|
}
|
|
|
|
return (
|
|
<nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
|
|
{/* removed mx-auto and px-* classes; use full width + responsive padding-inline using clamp */}
|
|
<div
|
|
className="w-full"
|
|
style={{
|
|
/* minimális padding 12px, növel a képernyővel, max 30px */
|
|
paddingInline: "clamp(12px, calc((100vw - 1024px) / 2), 80px)",
|
|
}}
|
|
>
|
|
<div className="flex justify-between h-16 items-center">
|
|
{/* Logo + Brand */}
|
|
<div className="flex-shrink-0 flex items-center gap-2">
|
|
<button onClick={goLanding} className=" cursor-pointer flex items-center mt-1 h-9">
|
|
<Logo size={36} />
|
|
</button>
|
|
<button
|
|
onClick={goLanding}
|
|
className="cursor-pointer flex items-center h-9 text-white font-bold text-2xl tracking-tight"
|
|
>
|
|
SerpentRace
|
|
</button>
|
|
</div>
|
|
|
|
{/* Desktop Menu */}
|
|
<div className="hidden md:flex items-center space-x-6">
|
|
{/* Bal oldali linkek */}
|
|
<button onClick={goAbout} className={navLinkClass}>
|
|
Rólunk
|
|
</button>
|
|
|
|
{/* Csak bejelentkezve */}
|
|
{isLoggedIn && (
|
|
<>
|
|
<Link to="/decks" className={navLinkClass}>
|
|
Paklik
|
|
</Link>
|
|
</>
|
|
)}
|
|
|
|
{/* Játék gomb */}
|
|
<button onClick={goHome} className={navLinkClassPlay}>
|
|
Játék
|
|
</button>
|
|
|
|
{/* Jobb oldali akciók */}
|
|
{!isLoggedIn ? (
|
|
<div className="flex items-center space-x-4">
|
|
<button
|
|
onClick={goLogin}
|
|
className="px-4 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
|
|
>
|
|
Bejelentkezés
|
|
</button>
|
|
|
|
{/* Elválasztó vonal */}
|
|
<div className="w-px h-10 bg-white/100"></div>
|
|
|
|
<Link
|
|
to="/register"
|
|
className="px-4 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
|
|
>
|
|
Regisztráció
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
// Ha be van jelentkezve: mutatunk egy kis lenyíló gombot (ikon), ami tartalmazza a Profil, Statisztikák és Kijelentkezés linkeket
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setUserMenuOpen((s) => !s)}
|
|
className="ml-2 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 flex items-center gap-2"
|
|
title="Felhasználói menü"
|
|
>
|
|
<FaBars className="h-5 w-5" />
|
|
</button>
|
|
|
|
{userMenuOpen && (
|
|
<div className="absolute right-0 mt-2 w-44 bg-white/5 backdrop-blur-sm border border-gray-700 rounded-lg shadow-lg overflow-hidden z-40">
|
|
<button
|
|
onClick={() => {
|
|
setUserMenuOpen(false)
|
|
// navigálás statisztikák
|
|
goLanding // fallback, majd ha kell: goReport
|
|
}}
|
|
className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
|
|
>
|
|
<FaChartBar className="w-4 h-4" />
|
|
<span className="text-sm">Statisztikák</span>
|
|
</button>
|
|
<button
|
|
onClick={() => {
|
|
setUserMenuOpen(false)
|
|
// profil
|
|
window.location.href = "/profile"
|
|
}}
|
|
className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
|
|
>
|
|
<FaUser className="w-4 h-4" />
|
|
<span className="text-sm">Profil</span>
|
|
</button>
|
|
<div className="h-px bg-white/5" />
|
|
<button
|
|
onClick={() => {
|
|
setUserMenuOpen(false)
|
|
handleLogout()
|
|
}}
|
|
className="w-full flex items-center gap-3 px-4 py-2 hover:bg-white/10 text-white"
|
|
>
|
|
<FaSignOutAlt className="w-4 h-4" />
|
|
<span className="text-sm">Kijelentkezés</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Mobile Hamburger */}
|
|
<div className="md:hidden flex items-center">
|
|
<button
|
|
onClick={() => setMenuOpen(!menuOpen)}
|
|
className="text-white focus:outline-none"
|
|
aria-label="Toggle menu"
|
|
>
|
|
<svg
|
|
className="h-7 w-7"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
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="M4 8h16M4 16h16" />
|
|
)}
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Menu */}
|
|
{menuOpen && (
|
|
<div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
|
|
<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>
|
|
</>
|
|
)}
|
|
|
|
<button
|
|
onClick={() => {
|
|
goHome()
|
|
setMenuOpen(false)
|
|
}}
|
|
className={navLinkClassPlay}
|
|
>
|
|
Játék
|
|
</button>
|
|
|
|
{!isLoggedIn ? (
|
|
<div className="flex flex-col space-y-2">
|
|
<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
|
|
</button>
|
|
|
|
{/* Elválasztó vonal mobilon */}
|
|
<div className="w-full h-px bg-white/30"></div>
|
|
|
|
<Link
|
|
to="/register"
|
|
onClick={() => setMenuOpen(false)}
|
|
className="block px-3 py-2 rounded-lg bg-white/10 hover:bg-white/20 text-white font-semibold transition-all"
|
|
>
|
|
Regisztráció
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="flex justify-end px-2 pb-2">
|
|
<button
|
|
onClick={() => {
|
|
handleLogout()
|
|
setMenuOpen(false)
|
|
}}
|
|
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 flex items-center gap-2"
|
|
title="Kijelentkezés"
|
|
>
|
|
<FaSignOutAlt className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</nav>
|
|
)
|
|
}
|
|
|
|
export default Navbar
|