Refactor component imports and structure: Update import paths for various components to improve organization, moving them into appropriate subdirectories. Remove unused components related to user and event management, enhancing code clarity and maintainability across the application.
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 4m36s
All checks were successful
Deploy with Docker Compose / deploy (push) Successful in 4m36s
This commit is contained in:
Julien Froidefond
239
components/navigation/Navigation.tsx
Normal file
239
components/navigation/Navigation.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useSession, signOut } from "next-auth/react";
|
||||
import { useState } from "react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import PlayerStats from "@/components/profile/PlayerStats";
|
||||
import { Button } from "@/components/ui";
|
||||
|
||||
interface UserData {
|
||||
username: string;
|
||||
avatar: string | null;
|
||||
hp: number;
|
||||
maxHp: number;
|
||||
xp: number;
|
||||
maxXp: number;
|
||||
level: number;
|
||||
}
|
||||
|
||||
interface NavigationProps {
|
||||
initialUserData?: UserData | null;
|
||||
initialIsAdmin?: boolean;
|
||||
}
|
||||
|
||||
export default function Navigation({
|
||||
initialUserData,
|
||||
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
|
||||
// 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-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 */}
|
||||
<Link
|
||||
href="/"
|
||||
className="flex flex-col hover:opacity-80 transition-opacity"
|
||||
>
|
||||
<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-[10px] sm:text-xs font-gaming-subtitle font-semibold flex items-center gap-1 tracking-wide">
|
||||
<span>✦</span>
|
||||
<span>Peaksys</span>
|
||||
<span>✦</span>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{/* 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"
|
||||
>
|
||||
HOME
|
||||
</Link>
|
||||
<Link
|
||||
href="/events"
|
||||
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
|
||||
>
|
||||
EVENTS
|
||||
</Link>
|
||||
<Link
|
||||
href="/leaderboard"
|
||||
className="text-white hover:text-pixel-gold transition text-xs font-normal uppercase tracking-widest"
|
||||
>
|
||||
LEADERBOARD
|
||||
</Link>
|
||||
{isAdmin && (
|
||||
<Link
|
||||
href="/admin"
|
||||
className="text-pixel-gold hover:text-orange-400 transition text-xs font-normal uppercase tracking-widest"
|
||||
>
|
||||
ADMIN
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Right Side */}
|
||||
<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()}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-xs font-normal"
|
||||
>
|
||||
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">
|
||||
<Button variant="primary" size="sm" className="text-xs">
|
||||
Inscription
|
||||
</Button>
|
||||
</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);
|
||||
}}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-xs font-normal 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)}>
|
||||
<Button
|
||||
variant="primary"
|
||||
size="sm"
|
||||
className="text-xs w-full text-center"
|
||||
>
|
||||
Inscription
|
||||
</Button>
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user