fix: sofortige visuelle Aktivierung der Navigationsbuttons beim Klick

- activeLink direkt beim Klick auf Link setzen, statt auf usePathname zu warten
- verbessert visuelles Feedback bei Navigation
- behebt kurze Verzögerung beim Wechsel der aktiven Navigation
This commit is contained in:
ISA
2025-07-08 10:41:20 +02:00
parent 976f3126f2
commit 0f233ce6e2
6 changed files with 21 additions and 15 deletions

View File

@@ -45,16 +45,17 @@ const Navigation: React.FC<NavigationProps> = ({ className }) => {
{item.name}
</div>
) : (
<Link href={formatPath(item.path)}>
<div
className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg ${
activeLink.startsWith(item.path)
? "bg-sky-500 text-white rounded-r-full xl:mr-4 xl:w-full"
: "text-black hover:bg-gray-200 rounded-r-full"
}`}
>
{item.name}
</div>
<Link
href={formatPath(item.path)}
prefetch={false}
onClick={() => setActiveLink(item.path)} // Sofortige visuelle Rückmeldung
className={`block px-4 py-2 mb-4 font-bold whitespace-nowrap transition duration-300 text-[1rem] sm:text-[1rem] md:text-[1rem] lg:text-[1rem] xl:text-sm 2xl:text-lg ${
activeLink.startsWith(item.path)
? "bg-sky-500 text-white rounded-r-full xl:mr-4 xl:w-full"
: "text-black hover:bg-gray-200 rounded-r-full"
}`}
>
{item.name}
</Link>
)}
</div>