From a6f2141fa03d8f47d4c3fa4c3f5d64d6bf65d70c Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Fri, 24 May 2024 12:44:35 +0200
Subject: [PATCH] chore: add color highlight to nav item when route matches

---
 components/app-header.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/app-header.vue b/components/app-header.vue
index c29fc61..a8668d2 100644
--- a/components/app-header.vue
+++ b/components/app-header.vue
@@ -18,8 +18,8 @@ const links = computed(() => {
 	<header class="border-b bg-frisch-marine">
 		<div class="w-full pb-4 pt-10">
 			<nav :aria-label="t('AppHeader.navigation-main')">
-				<ul class="container grid grid-cols-2 items-end text-frisch-orange" role="list">
-					<div class="text-2xl font-extrabold">
+				<ul class="container grid grid-cols-2 items-end" role="list">
+					<div class="text-2xl font-extrabold text-frisch-orange">
 						<NavLink :href="homeLink.href">
 							Digitales Archiv
 							<br />
@@ -36,7 +36,11 @@ const links = computed(() => {
 					>
 						<li v-for="(link, key, index) of links" :key="key" class="flex shrink-0 gap-x-4">
 							<Separator v-if="index > 0" class="h-5 w-0.5 bg-frisch-orange" />
-							<NavLink :href="link.href" class="hover:text-frisch-indigo">
+							<NavLink
+								:href="link.href"
+								:class="route.path === `/${key}` ? 'text-frisch-indigo' : 'text-frisch-orange'"
+								class="hover:text-frisch-indigo"
+							>
 								{{ link.label }}
 							</NavLink>
 						</li>