Wiki

resources/js/components/LinkHeader.vue

@@ -6,42 +6,47 @@ const page = usePage();
 
 const links = [
     {
-        name: 'Perceptron Simple',
+        name: 'Introduction',
+        href: '/',
+        data: {},
+    },
+    {
+        name: '1. Perceptron Simple',
         href: '/perceptron',
         data: { type: 'simple' },
     },
     {
-        name: 'Descente du gradient',
+        name: '2. Descente du gradient',
         href: '/perceptron',
         data: { type: 'gradientdescent' },
     },
     {
-        name: 'ADALINE',
+        name: '3. ADALINE',
         href: '/perceptron',
         data: { type: 'adaline' },
     },
     {
-        name: 'Mono-couche',
+        name: '4. Monocouche',
         href: '/perceptron',
         data: { type: 'monolayer' },
     },
     {
-        name: 'Multi-couche',
+        name: '5. Multicouches',
         href: '/perceptron',
         data: { type: 'multilayer' },
     },
 ];
 
 const isActiveLink = (link: any) => {
-    return page.component === 'PerceptronViewer' && page.props.type === link.data.type;
+    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 text-sm not-has-[nav]:hidden"
+        class="my-6 w-full overflow-x-auto text-sm not-has-[nav]:hidden"
     >
-        <nav class="flex items-center justify-center gap-4">
+        <nav class="min-w-max flex items-center justify-center gap-4">
             <Link
                 v-for="link in links"
                 :key="link.name"