A lot of AI slop

frontend/app/components/parts/HeaderLinks.vue

@@ -1,33 +1,131 @@
 <script setup lang="ts">
 const localePath = useLocalePath()
+const route = useRoute()
+const router = useRouter()
+
+const scrollTargets: Record<string, string> = {
+    'index': 'top',
+    'blog': '#scroll-blog',
+    'contact': '#scroll-contact',
+    'art': '#scroll-art'
+}
+
+const currentPath = computed(() => route.path)
+
+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 })
+            }
+        }
+}
 </script>
 
 <template>
-    <div class="menus">
-        <NuxtLink :to="localePath('index')">/</NuxtLink>
-        <NuxtLink :to="localePath('blog')">/{{ $t('header.links.blog') }}</NuxtLink>
-        <NuxtLink :to="localePath('contact')">/{{ $t('header.links.contact') }}</NuxtLink>
-        <NuxtLink :to="localePath('art')">/{{ $t('header.links.art') }}</NuxtLink>
-        <!-- <NuxtLink class="disabled">Drawings</NuxtLink> -->
+    <div class="tui-tabs">
+        <a :href="localePath('index')" class="tui-tab" @click="handleClick('index', $event)">
+            <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)">
+            <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)">
+            <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)">
+            <span class="tab-sep">│</span>
+            <span class="tab-label">/{{ $t('header.links.art') }}</span>
+        </a>
     </div>
 </template>
 
 <style lang="scss" scoped>
 
-.menus > a {
-    margin-right: 10px;
-    margin-left: 10px;
-    text-decoration: none;
-    text-shadow: 0 0 1px var(--color-link);
+.tui-tabs {
+  display: inline-flex;
+  background-color: var(--color-background-fore);
+  border: 1px solid var(--color-border-color);
+  box-shadow: inset 2px -2px 0px 0px rgba(0,0,0,0.2);
 }
 
+.tui-tab {
+    display: inline-flex;
+    align-items: center;
+    text-decoration: none;
+    padding: 4px 12px;
+    font-family: 'Hurmit', monospace;
+    font-size: 0.85rem;
+    color: var(--color-text);
+    text-shadow: none;
+    transition: all 0.1s steps(2, end);
+    border-right: 1px solid var(--color-border-color);
+    
+    &:last-child {
+        border-right: none;
+    }
+    
+    .tab-sep {
+        color: var(--color-text);
+        opacity: 0.3;
+        margin-right: 8px;
+        font-size: 0.75rem;
+    }
 
-.menus > a.router-link-exact-active {
-    color: var(--color-link);
-    text-shadow: 0 0 8px var(--color-link);
+    &:hover {
+        background-color: var(--color-hover);
+        text-shadow: none;
+    }
+}
+
+.tui-tab.router-link-exact-active {
+    color: var(--color-background-fore);
+    background-color: var(--color-link);
+    text-shadow: 0 0 8px rgba(255,255,255,0.3);
+    
+    .tab-sep {
+        color: var(--color-background-fore);
+        opacity: 0.6;
+    }
 }
 
 .disabled {
     color: #aaaaaa77;
 }
-</style>
+
+@media screen and (max-width: 900px) {
+  .tui-tab {
+      padding: 3px 8px;
+      font-size: 0.75rem;
+      
+      .tab-sep {
+          margin-right: 4px;
+      }
+  }
+}
+
+@media screen and (max-width: 600px) {
+  .tui-tab {
+      padding: 3px 5px;
+      font-size: 0.7rem;
+      
+      .tab-sep {
+          margin-right: 3px;
+      }
+  }
+}
+
+</style>