More AI slop

frontend/app/components/parts/HeaderLinks.vue

@@ -1,55 +1,49 @@
 <script setup lang="ts">
 const localePath = useLocalePath()
 const route = useRoute()
-const router = useRouter()
 
 const scrollTargets: Record<string, string> = {
-    'index': 'top',
+    'index': '#top',
     'blog': '#scroll-blog',
     'contact': '#scroll-contact',
     'art': '#scroll-art'
 }
 
-const currentPath = computed(() => route.path)
+const isHome = computed(() => route.path === localePath('index'))
 
-function handleClick(targetKey: string, e: MouseEvent) {
-    if (e.ctrlKey || e.metaKey || e.altKey || e.button !== 0) return
-   const isHome = currentPath.value === localePath('index')
-    if (!isHome) return
-      e.preventDefault()
-      const targetId = scrollTargets[targetKey] || 'top'
-      if (targetId === 'top') {
-        window.scrollTo({ top: 0, behavior: 'smooth' })
-        } else {
-            const el = document.querySelector(targetId)
-            if (el) {
-                el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-            } else {
-                const hash = targetId.substring(1)
-                router.replace({ hash })
-            }
-        }
+function isActive(targetKey: string): boolean {
+    if (targetKey === 'index') return isHome.value
+    const targetPath = localePath(targetKey)
+    return route.path === targetPath
+}
+
+function getToPath(targetKey: string): string {
+    if (isHome.value) {
+        const targetId = scrollTargets[targetKey] || 'top'
+        return targetId.substring(1) !== '' ? '#' + targetId.substring(1) : '/'
+    }
+    return localePath(targetKey === 'index' ? 'index' : targetKey)
 }
 </script>
 
 <template>
     <div class="tui-tabs">
-        <a :href="localePath('index')" class="tui-tab" @click="handleClick('index', $event)">
+        <NuxtLink :to="getToPath('index')" class="tui-tab" :class="{ 'tui-tab-active': isActive('index') }">
             <span class="tab-sep" v-if="false">│</span>
             <span class="tab-label">/</span>
-        </a>
-        <a :href="localePath('blog')" class="tui-tab" @click="handleClick('blog', $event)">
+        </NuxtLink>
+        <NuxtLink :to="getToPath('blog')" class="tui-tab" :class="{ 'tui-tab-active': isActive('blog') }">
             <span class="tab-sep">│</span>
             <span class="tab-label">/{{ $t('header.links.blog') }}</span>
-        </a>
-        <a :href="localePath('contact')" class="tui-tab" @click="handleClick('contact', $event)">
+        </NuxtLink>
+        <NuxtLink :to="getToPath('contact')" class="tui-tab" :class="{ 'tui-tab-active': isActive('contact') }">
             <span class="tab-sep">│</span>
             <span class="tab-label">/{{ $t('header.links.contact') }}</span>
-        </a>
-        <a :href="localePath('art')" class="tui-tab" @click="handleClick('art', $event)">
+        </NuxtLink>
+        <NuxtLink :to="getToPath('art')" class="tui-tab" :class="{ 'tui-tab-active': isActive('art') }">
             <span class="tab-sep">│</span>
             <span class="tab-label">/{{ $t('header.links.art') }}</span>
-        </a>
+        </NuxtLink>
     </div>
 </template>
 
@@ -91,7 +85,7 @@ function handleClick(targetKey: string, e: MouseEvent) {
     }
 }
 
-.tui-tab.router-link-exact-active {
+.tui-tab-active {
     color: var(--color-background-fore);
     background-color: var(--color-link);
     text-shadow: 0 0 8px rgba(255,255,255,0.3);