60 lines
2.4 KiB
TypeScript
60 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Activity, LayoutDashboard, List, Search, Globe, Settings, TerminalSquare } from 'lucide-react';
|
|
import GlitchText from './GlitchText';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const navItems = [
|
|
{ name: 'Dashboard', href: '/dashboard', icon: LayoutDashboard },
|
|
{ name: 'Listings', href: '/listings', icon: List },
|
|
{ name: 'Targets', href: '/keywords', icon: Search },
|
|
{ name: 'Sites', href: '/sites', icon: Globe },
|
|
{ name: 'AI Log', href: '/ai-log', icon: TerminalSquare },
|
|
{ name: 'Settings', href: '/settings', icon: Settings },
|
|
];
|
|
|
|
export default function Navbar() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<header className="sticky top-0 z-40 w-full border-b border-border bg-background/80 backdrop-blur-md">
|
|
<div className="container mx-auto flex h-16 items-center justify-between px-4">
|
|
<Link href="/" className="flex items-center gap-2 group">
|
|
<Activity className="h-6 w-6 text-primary group-hover:text-accent transition-colors" />
|
|
<GlitchText text="BIDWRAITH" className="text-xl tracking-wider text-foreground" />
|
|
</Link>
|
|
<nav className="hidden md:flex gap-6">
|
|
{navItems.map((item) => {
|
|
const isActive = pathname.startsWith(item.href);
|
|
return (
|
|
<Link
|
|
key={item.name}
|
|
href={item.href}
|
|
className={`flex items-center gap-2 text-sm font-medium transition-colors relative ${isActive ? 'text-primary' : 'text-muted-foreground hover:text-foreground'}`}
|
|
>
|
|
<item.icon className="h-4 w-4" />
|
|
{item.name}
|
|
{isActive && (
|
|
<motion.div
|
|
layoutId="navbar-indicator"
|
|
className="absolute -bottom-[21px] left-0 right-0 h-0.5 bg-primary shadow-[0_0_8px_rgba(0,255,136,0.8)]"
|
|
transition={{ type: 'spring', stiffness: 300, damping: 30 }}
|
|
/>
|
|
)}
|
|
</Link>
|
|
);
|
|
})}
|
|
</nav>
|
|
<div className="flex items-center gap-4">
|
|
<div className="hidden lg:flex items-center gap-2 text-xs font-mono text-primary/70">
|
|
<span className="w-2 h-2 rounded-full bg-primary animate-pulse shadow-[0_0_8px_rgba(0,255,136,0.8)]"></span>
|
|
SYSTEM_ONLINE
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|