51 lines
2.7 KiB
React
51 lines
2.7 KiB
React
// frontend/src/components/Layout/Navbar.jsx
|
|
|
|
import React from 'react';
|
|
import { Link, useLocation } from 'react-router-dom';
|
|
import { Volleyball, LogOut, Lock } from 'lucide-react';
|
|
|
|
export default function Navbar({ title, subtitle, isAdmin }) {
|
|
const location = useLocation();
|
|
const isDashboard = location.pathname === '/';
|
|
|
|
return (
|
|
<nav className="bg-white/95 dark:bg-zinc-900/95 backdrop-blur-lg border-b border-zinc-300 dark:border-zinc-800 sticky top-0 z-[100] px-6 py-4 flex justify-between items-center shadow-sm">
|
|
<Link to="/" className="flex items-center gap-4 cursor-pointer group select-none shrink-0">
|
|
<div className="p-2.5 bg-orange-600 rounded-xl group-hover:rotate-12 transition-transform shadow-lg shadow-orange-600/30">
|
|
<Volleyball className="text-white" size={24} />
|
|
</div>
|
|
<div className="hidden sm:block">
|
|
<h1 className="text-2xl font-black tracking-tighter leading-none text-zinc-900 dark:text-white">VolleyManager</h1>
|
|
<p className="text-[10px] font-black text-zinc-500 dark:text-zinc-400 uppercase tracking-widest mt-0.5">Tournament Ops</p>
|
|
</div>
|
|
</Link>
|
|
|
|
<div className="absolute left-1/2 -translate-x-1/2 text-center pointer-events-none">
|
|
<div className="font-black uppercase text-sm tracking-[0.3em] text-zinc-900 dark:text-white truncate leading-none mb-1">
|
|
{title || 'Dashboard'}
|
|
</div>
|
|
{subtitle && (
|
|
<div className="text-[10px] font-black text-zinc-400 dark:text-zinc-500 uppercase tracking-widest leading-none">
|
|
{subtitle}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex gap-4 items-center">
|
|
{isAdmin ? (
|
|
<button
|
|
onClick={() => { localStorage.removeItem('volleyToken'); window.location.reload(); }}
|
|
className="text-zinc-400 hover:text-red-500 transition active:scale-90"
|
|
title="Logout"
|
|
>
|
|
<LogOut size={22} />
|
|
</button>
|
|
) : (
|
|
<Link to="/login" className="text-orange-600 font-black flex items-center gap-2 text-[10px] uppercase tracking-widest hover:text-orange-500 transition group p-2 rounded-xl hover:bg-orange-50 dark:hover:bg-orange-950/20">
|
|
<Lock size={14} className="group-hover:-translate-y-0.5 transition-transform" /> <span>Login</span>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</nav>
|
|
);
|
|
} |