julienfroidefond/got-gaming
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor UI components for improved responsiveness and consistency: Update styles in AdminPanel, EventManagement, FeedbackManagement, HeroSection, ImageSelector, LeaderboardSection, Navigation, PlayerStats, and UserManagement to enhance mobile and desktop layouts. Adjust text sizes, padding, and button styles for better user experience across devices.

Browse Source
This commit is contained in:
Julien Froidefond
2025-12-11 06:45:14 +01:00
parent f0c9a9e4cc
commit 7dbd044859
9 changed files with 449 additions and 260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
components/Navigation.tsx
View File

@@ -2,6 +2,8 @@
import Link from "next/link";
import { useSession, signOut } from "next-auth/react";
import { useState } from "react";
import { usePathname } from "next/navigation";
import PlayerStats from "./PlayerStats";
interface UserData {
@@ -24,29 +26,37 @@ export default function Navigation({
initialIsAdmin,
}: NavigationProps) {
const { data: session } = useSession();
const [isMenuOpen, setIsMenuOpen] = useState(false);
const pathname = usePathname();
// Ne pas afficher le profil sur les pages login/register
const isAuthPage = pathname === "/login" || pathname === "/register";
// Utiliser initialUserData pour déterminer l'état de connexion pendant l'hydratation
// Cela évite le clignottement au reload
const isAuthenticated = initialUserData !== null || session !== null;
// Vérifier explicitement que initialUserData n'est pas undefined
const isAuthenticated =
(initialUserData !== undefined && initialUserData !== null) ||
session !== null;
const isAdmin = initialIsAdmin ?? session?.user?.role === "ADMIN";
return (
<nav className="w-full fixed top-0 left-0 z-50 px-8 py-3 bg-black/80 backdrop-blur-sm border-b border-gray-800/30">
<nav className="w-full fixed top-0 left-0 z-50 px-4 sm:px-8 py-3 bg-black/80 backdrop-blur-sm border-b border-gray-800/30">
<div className="max-w-7xl mx-auto flex items-center justify-between">
{/* Logo - Left */}
<div className="flex flex-col">
<div className="text-white text-xl font-gaming font-bold tracking-tight">
<div className="text-white text-lg sm:text-xl font-gaming font-bold tracking-tight">
GAME.OF.TECH
</div>
<div className="text-pixel-gold text-xs font-gaming-subtitle font-semibold flex items-center gap-1 tracking-wide">
<div className="text-pixel-gold text-[10px] sm:text-xs font-gaming-subtitle font-semibold flex items-center gap-1 tracking-wide">
<span>✦</span>
<span>Peaksys</span>
<span>✦</span>
</div>
</div>
{/* Navigation Links - Center */}
<div className="flex items-center gap-6">
{/* Navigation Links - Center (Desktop) */}
<div className="hidden md:flex items-center gap-6">
<Link
href="/"
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
@@ -76,35 +86,145 @@ export default function Navigation({
</div>
{/* Right Side */}
<div className="flex items-center gap-4">
{isAuthenticated ? (
<>
<div className="flex items-center gap-2 sm:gap-4">
{/* PlayerStats - Hidden on mobile */}
{isAuthenticated && !isAuthPage && (
<div className="hidden lg:block">
<PlayerStats initialUserData={initialUserData} />
</div>
)}
{/* Desktop Auth Buttons */}
<div className="hidden md:flex items-center gap-4">
{isAuthenticated ? (
<button
onClick={() => signOut()}
className="text-gray-400 hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
>
Déconnexion
</button>
</>
) : (
<>
<Link
href="/login"
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
>
Connexion
</Link>
<Link
href="/register"
className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition"
>
Inscription
</Link>
</>
)}
) : (
<>
<Link
href="/login"
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
>
Connexion
</Link>
<Link
href="/register"
className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition"
>
Inscription
</Link>
</>
)}
</div>
{/* Mobile Menu Button */}
<button
onClick={() => setIsMenuOpen(!isMenuOpen)}
className="md:hidden text-white hover:text-pixel-gold transition p-2"
aria-label="Toggle menu"
>
<svg
className="w-6 h-6"
fill="none"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="2"
viewBox="0 0 24 24"
stroke="currentColor"
>
{isMenuOpen ? (
<path d="M6 18L18 6M6 6l12 12" />
) : (
<path d="M4 6h16M4 12h16M4 18h16" />
)}
</svg>
</button>
</div>
</div>
{/* Mobile Menu */}
{isMenuOpen && (
<div className="md:hidden absolute top-full left-0 w-full bg-black/95 backdrop-blur-sm border-b border-gray-800/30">
<div className="px-4 py-4 flex flex-col gap-4">
{/* Mobile Navigation Links */}
<div className="flex flex-col gap-3">
<Link
href="/"
onClick={() => setIsMenuOpen(false)}
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
>
HOME
</Link>
<Link
href="/events"
onClick={() => setIsMenuOpen(false)}
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
>
EVENTS
</Link>
<Link
href="/leaderboard"
onClick={() => setIsMenuOpen(false)}
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
>
LEADERBOARD
</Link>
{isAdmin && (
<Link
href="/admin"
onClick={() => setIsMenuOpen(false)}
className="text-pixel-gold hover:text-orange-400 transition text-xs font-normal uppercase tracking-widest py-2"
>
ADMIN
</Link>
)}
</div>
{/* Mobile PlayerStats */}
{isAuthenticated && !isAuthPage && (
<div className="lg:hidden pt-2 border-t border-gray-800/30">
<PlayerStats initialUserData={initialUserData} />
</div>
)}
{/* Mobile Auth Buttons */}
<div className="flex flex-col gap-3 pt-2 border-t border-gray-800/30">
{isAuthenticated ? (
<button
onClick={() => {
signOut();
setIsMenuOpen(false);
}}
className="text-gray-400 hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest text-left py-2"
>
Déconnexion
</button>
) : (
<>
<Link
href="/login"
onClick={() => setIsMenuOpen(false)}
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest py-2"
>
Connexion
</Link>
<Link
href="/register"
onClick={() => setIsMenuOpen(false)}
className="px-4 py-2 border border-pixel-gold/50 bg-black/60 text-white uppercase text-xs tracking-widest rounded hover:bg-pixel-gold/10 hover:border-pixel-gold transition text-center"
>
Inscription
</Link>
</>
)}
</div>
</div>
</div>
)}
</nav>
);
}