96 lines
3.1 KiB
TypeScript
96 lines
3.1 KiB
TypeScript
// components/Navbar.tsx
|
|
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
export default function Navbar() {
|
|
const pathname = usePathname();
|
|
|
|
const isActive = (path: string) => {
|
|
if (path === '/') {
|
|
return pathname === path;
|
|
}
|
|
return pathname.startsWith(path);
|
|
};
|
|
|
|
return (
|
|
<nav className="border-b border-white/10 bg-[#0a0a0a]/80 backdrop-blur-xl sticky top-0 z-50">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="flex items-center justify-between h-16">
|
|
{/* Logo - links to home */}
|
|
<Link href="/" className="flex items-center space-x-3 hover:opacity-80 transition-opacity">
|
|
<img
|
|
src="https://openwheels.racing/files/img/Openwheels_landscape.svg"
|
|
alt="OpenWheels"
|
|
className="h-6 hidden sm:block brightness-0 invert"
|
|
/>
|
|
</Link>
|
|
|
|
{/* Nav Links */}
|
|
<div className="flex items-center space-x-1">
|
|
<Link
|
|
href="/"
|
|
className={`px-4 py-2 text-sm font-medium transition-colors ${
|
|
isActive('/') && pathname === '/'
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-white/50 hover:text-white'
|
|
}`}
|
|
>
|
|
HOME
|
|
</Link>
|
|
<Link
|
|
href="/dashboard"
|
|
className={`px-4 py-2 text-sm font-medium transition-colors ${
|
|
isActive('/dashboard')
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-white/50 hover:text-white'
|
|
}`}
|
|
>
|
|
DASHBOARD
|
|
</Link>
|
|
<Link
|
|
href="/rankings"
|
|
className={`px-4 py-2 text-sm font-medium transition-colors ${
|
|
isActive('/rankings')
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-white/50 hover:text-white'
|
|
}`}
|
|
>
|
|
RANKINGS
|
|
</Link>
|
|
<Link
|
|
href="/events"
|
|
className={`px-4 py-2 text-sm font-medium transition-colors ${
|
|
isActive('/events')
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-white/50 hover:text-white'
|
|
}`}
|
|
>
|
|
EVENTS
|
|
</Link>
|
|
<Link
|
|
href="/live"
|
|
className={`px-4 py-2 text-sm font-medium transition-colors ${
|
|
isActive('/live')
|
|
? 'text-white border-b-2 border-white'
|
|
: 'text-white/50 hover:text-white'
|
|
}`}
|
|
>
|
|
LIVE
|
|
</Link>
|
|
<a
|
|
href="https://discord.gg/nvuB8EvT9P"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="ml-4 px-5 py-2 text-sm border border-white hover:bg-white hover:text-[#0a0a0a] transition-all"
|
|
>
|
|
DISCORD
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|