git init

resources/js/components/LinkHeader.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { Link } from '@inertiajs/vue3';
+import { usePage } from '@inertiajs/vue3';
+
+const page = usePage();
+
+const links = [
+    {
+        name: 'Perceptron Simple',
+        href: '/perceptron',
+        data: { type: 'simple' },
+    },
+    {
+        name: 'Perceptron Complex',
+        href: '/perceptron',
+        data: { type: 'complex' },
+    },
+];
+
+const isActiveLink = (link: any) => {
+    return page.component === 'PerceptronViewer' && page.props.type === link.data.type;
+};
+</script>
+
+<template>
+    <header
+        class="my-6 w-full text-sm not-has-[nav]:hidden"
+    >
+        <nav class="flex items-center justify-center gap-4">
+            <Link
+                v-for="link in links"
+                :key="link.name"
+                :href="link.href"
+                :class="{'border border-[#00F] dark:border-[#00F] dark:text-[#898999]' : isActiveLink(link), 'dark:text-[#EDEDEC] border-[#19140035]': !isActiveLink(link), 'inline-block rounded-sm border px-5 py-1.5 text-sm leading-normal text-[#1b1b18] hover:border-[#1915014a] dark:border-[#3E3E3A] dark:hover:border-[#62605b]': true}"
+                :data="link.data"
+                view-transition
+            >
+                {{ link.name }}
+            </Link>
+        </nav>
+    </header>
+</template>