From 985acbf18a3cd1c6ab2977a93aa7a80e274d7c8f Mon Sep 17 00:00:00 2001
From: Baobhan Sith <80159437+Heavrnl@users.noreply.github.com>
Date: Wed, 23 Apr 2025 21:29:28 +0800
Subject: [PATCH] Update App.vue

---
 packages/frontend/src/App.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/App.vue b/packages/frontend/src/App.vue
index 06c70da..a2c9d7e 100644
--- a/packages/frontend/src/App.vue
+++ b/packages/frontend/src/App.vue
@@ -44,8 +44,10 @@ const updateUnderline = async () => {
   if (navRef.value && underlineRef.value) {
     const activeLink = navRef.value.querySelector('.router-link-exact-active') as HTMLElement;
     if (activeLink) {
+      const offsetBottom = 2; // 下划线距离文字底部的距离 (px)
       underlineRef.value.style.left = `${activeLink.offsetLeft}px`;
       underlineRef.value.style.width = `${activeLink.offsetWidth}px`;
+      // underlineRef.value.style.top = `${activeLink.offsetTop + activeLink.offsetHeight + offsetBottom}px`; // 移除 top 设置
       underlineRef.value.style.opacity = '1'; // Make it visible
     } else {
       underlineRef.value.style.opacity = '0'; // Hide if no active link (e.g., on login page if not a nav link)
@@ -265,7 +267,7 @@ const isElementVisibleAndFocusable = (element: HTMLElement): boolean => {
             <a href="#" v-if="isAuthenticated" @click.prevent="handleLogout" class="px-3 py-2 rounded-md text-sm font-medium text-secondary hover:text-link-hover hover:bg-nav-active-bg hover:no-underline transition duration-150 ease-in-out whitespace-nowrap">{{ t('nav.logout') }}</a>
         </div>
         <!-- Sliding underline element with Tailwind classes using theme variables (JS still controls positioning) -->
-        <div ref="underlineRef" class="absolute bottom-0 h-0.5 bg-link-active rounded transition-all duration-300 ease-in-out pointer-events-none opacity-0"></div> <!-- Added opacity-0 -->
+        <div ref="underlineRef" class="absolute bottom-0 h-0.5 bg-link-active rounded transition-all duration-300 ease-in-out pointer-events-none opacity-0 transform translate-y-1.5"></div> <!-- Changed translate-y-1 to translate-y-1.5 -->
       </nav>
     </header>