damjan_savicandClaude Opus 4.5
e1bbe5455d
Vollständige Next.js 15 Portfolio-Website mit: - Blog-System mit 100+ Artikeln - Supabase-Integration - Responsive Design mit Tailwind CSS - TypeScript-Konfiguration - Testing-Setup mit Vitest und Playwright Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { ReactNode } from 'react';
|
|
|
|
interface NavLinkProps {
|
|
href: string;
|
|
icon: ReactNode;
|
|
label: string;
|
|
onClick?: () => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function NavLink({ href, icon, label, onClick, className }: NavLinkProps) {
|
|
const pathname = usePathname();
|
|
// Check if path matches (accounting for locale prefix)
|
|
const pathWithoutLocale = pathname.replace(/^\/(de|en|sr)/, '');
|
|
const hrefWithoutLocale = href.replace(/^\/(de|en|sr)/, '');
|
|
const isActive = pathWithoutLocale === hrefWithoutLocale ||
|
|
(hrefWithoutLocale === '' && pathWithoutLocale === '');
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
onClick={onClick}
|
|
className={`
|
|
relative flex items-center gap-2 rounded-full py-2.5 px-4 min-h-[44px]
|
|
transition-all duration-200 ease-in-out
|
|
focus:outline-none focus:ring-2 focus:ring-zinc-600 focus:ring-offset-2 focus:ring-offset-zinc-950
|
|
${isActive ? 'text-white bg-zinc-700/60' : 'text-zinc-400 hover:text-white hover:bg-zinc-800/30'}
|
|
${className || ''}
|
|
`}
|
|
>
|
|
{icon}
|
|
<span className="text-sm tracking-wide">{label}</span>
|
|
</Link>
|
|
);
|
|
}
|