63 lines
1.8 KiB
Vue
63 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
import { usePage } from '@inertiajs/vue3';
|
|
|
|
const page = usePage();
|
|
|
|
const links = [
|
|
{
|
|
name: 'Introduction',
|
|
href: '/',
|
|
data: {},
|
|
},
|
|
{
|
|
name: '1. Perceptron Simple',
|
|
href: '/perceptron',
|
|
data: { type: 'simple' },
|
|
},
|
|
{
|
|
name: '2. Descente du gradient',
|
|
href: '/perceptron',
|
|
data: { type: 'gradientdescent' },
|
|
},
|
|
{
|
|
name: '3. ADALINE',
|
|
href: '/perceptron',
|
|
data: { type: 'adaline' },
|
|
},
|
|
{
|
|
name: '4. Monocouche',
|
|
href: '/perceptron',
|
|
data: { type: 'monolayer' },
|
|
},
|
|
{
|
|
name: '5. Multicouches',
|
|
href: '/perceptron',
|
|
data: { type: 'multilayer' },
|
|
},
|
|
];
|
|
|
|
const isActiveLink = (link: any) => {
|
|
return (page.component === 'Home' && page.props.type === link.data?.type) || (page.component === 'PerceptronViewer' && page.props.type === link.data?.type);
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<header
|
|
class="my-6 w-full overflow-x-auto text-sm not-has-[nav]:hidden"
|
|
>
|
|
<nav class="min-w-max 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>
|