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

navbar meg merge

Browse Source
This commit is contained in:
WalkeU
2025-10-27 18:55:54 +01:00
parent d0741c273f
commit 39e0d36a7f
3 changed files with 343 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files
SerpentRace_Frontend/src/components/Navbar/Navbar.jsx
+100 -64
View File
@@ -1,18 +1,17 @@
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 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 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 isLoggedIn = Boolean(
localStorage.getItem("authLevel") && localStorage.getItem("username")
)
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()
@@ -25,7 +24,14 @@ const Navbar = () => {
return (
<nav className="bg-gradient-to-r from-green-700 to-emerald-500 shadow-lg">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-0">
{/* 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">
@@ -43,22 +49,16 @@ const Navbar = () => {
{/* Desktop Menu */}
<div className="hidden md:flex items-center space-x-6">
{/* Bal oldali linkek */}
<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="/profile" className={navLinkClass}>Profil</Link>
<Link to="/decks" className={navLinkClass}>
Paklik
</Link>
</>
)}
@@ -88,26 +88,54 @@ const Navbar = () => {
</Link>
</div>
) : (
<button
onClick={handleLogout}
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"
title="Kijelentkezés"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
// 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ü"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
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>
<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>
@@ -133,12 +161,7 @@ const Navbar = () => {
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>
@@ -149,24 +172,50 @@ const Navbar = () => {
{/* Mobile Menu */}
{menuOpen && (
<div className="md:hidden bg-emerald-600 px-2 pt-2 pb-3 space-y-1">
<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>
<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="/profile" onClick={() => setMenuOpen(false)} className={navLinkClass}>Profil</Link>
<Link to="/decks" onClick={() => setMenuOpen(false)} className={navLinkClass}>
Paklik
</Link>
</>
)}
<button onClick={() => { goHome(); setMenuOpen(false) }} className={navLinkClassPlay}>Játék</button>
<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) }}
onClick={() => {
goLogin()
setMenuOpen(false)
}}
className="block px-3 py-2 rounded-lg hover:bg-white/20 text-white font-semibold transition-all"
>
Bejelentkezés
@@ -190,23 +239,10 @@ const Navbar = () => {
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"
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"
>
<svg
xmlns="http://www.w3.org/2000/svg"
className="h-6 w-6"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
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>
<FaSignOutAlt className="h-6 w-6" />
</button>
</div>
)}