From bf836e721638342b7bba6e5ed8d7d557f34b7e73 Mon Sep 17 00:00:00 2001
From: einhornimmond <info@einhornimmond.de>
Date: Tue, 11 Mar 2025 10:55:24 +0100
Subject: [PATCH] make auth nav link span if active

---
 frontend/src/components/Auth/AuthNavbar.vue   |  9 +++++++--
 .../src/components/Auth/AuthNavbarSmall.vue   |  5 +++--
 frontend/src/components/Menu/NavItem.vue      | 19 +++++++++++++++++++
 3 files changed, 29 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/Menu/NavItem.vue

diff --git a/frontend/src/components/Auth/AuthNavbar.vue b/frontend/src/components/Auth/AuthNavbar.vue
index 456914f2a..710d15b30 100644
--- a/frontend/src/components/Auth/AuthNavbar.vue
+++ b/frontend/src/components/Auth/AuthNavbar.vue
@@ -8,9 +8,13 @@
       <BImg class="sheet-img position-absolute d-block d-lg-none zindex1000" :src="sheet"></BImg>
       <BCollapse id="nav-collapse" is-nav>
         <BNavbarNav class="ms-auto me-4 d-none d-lg-flex" right>
-          <BNavItem :to="register()" class="auth-navbar ms-lg-5">{{ $t('signup') }}</BNavItem>
+          <NavItem :to="register()" class="auth-navbar ms-lg-5">
+            {{ $t('signup') }}
+          </NavItem>
           <span class="d-none d-lg-block py-1">{{ $t('|') }}</span>
-          <BNavItem :to="login()" class="auth-navbar">{{ $t('signin') }}</BNavItem>
+          <NavItem :to="login()" class="auth-navbar">
+            {{ $t('signin') }}
+          </NavItem>
         </BNavbarNav>
       </BCollapse>
     </BNavbar>
@@ -19,6 +23,7 @@
 
 <script setup>
 import { useAuthLinks } from '@/composables/useAuthLinks'
+import NavItem from '../Menu/NavItem.vue'
 
 const { login, register } = useAuthLinks()
 
diff --git a/frontend/src/components/Auth/AuthNavbarSmall.vue b/frontend/src/components/Auth/AuthNavbarSmall.vue
index 15dd77b9d..e7917ffe8 100644
--- a/frontend/src/components/Auth/AuthNavbarSmall.vue
+++ b/frontend/src/components/Auth/AuthNavbarSmall.vue
@@ -2,9 +2,9 @@
   <div class="navbar-small">
     <BNavbar class="navi">
       <BNavbarNav>
-        <BNavItem :to="register()" class="auth-navbar">{{ $t('signup') }}</BNavItem>
+        <NavItem :to="register()" class="auth-navbar">{{ $t('signup') }}</NavItem>
         <span class="mt-1">{{ $t('|') }}</span>
-        <BNavItem :to="login()" class="auth-navbar">{{ $t('signin') }}</BNavItem>
+        <NavItem :to="login()" class="auth-navbar">{{ $t('signin') }}</NavItem>
       </BNavbarNav>
     </BNavbar>
   </div>
@@ -12,6 +12,7 @@
 
 <script setup>
 import { useAuthLinks } from '@/composables/useAuthLinks'
+import NavItem from '../Menu/NavItem.vue'
 
 const { login, register } = useAuthLinks()
 </script>
diff --git a/frontend/src/components/Menu/NavItem.vue b/frontend/src/components/Menu/NavItem.vue
new file mode 100644
index 000000000..af8760dce
--- /dev/null
+++ b/frontend/src/components/Menu/NavItem.vue
@@ -0,0 +1,19 @@
+<template>
+  <li :class="['nav-item', { active: isActive }]">
+    <span v-if="isActive" class="nav-link active" aria-current="page">
+      <slot></slot>
+    </span>
+    <BNavItem v-else :to="href" class="auth-navbar"><slot></slot></BNavItem>
+  </li>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+import { RouterLink, useLink } from 'vue-router'
+
+const props = defineProps({
+  ...RouterLink.props,
+})
+
+const { href, isActive } = useLink(props)
+</script>