Move visualiser to explorer folder and start working on account

components/explorer/NavigationLink.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+interface NavItem {
+    title: string
+    _path: string
+    _id?: string
+    _draft?: boolean
+    children?: NavItem[]
+}
+interface Props {
+    link: NavItem;
+}
+
+const props = defineProps<Props>();
+const hasChildren = computed(() => {
+    return props.link && props.link.children && props.link.children.length > 0 || false;
+});
+
+if(hasChildren.value)
+{
+    props.link.children?.sort((a, b) => {
+        if(a._path === props.link._path)
+            return -1;
+        if(b._path === props.link._path)
+            return 1;
+        return 0;
+    });
+}
+
+const collapsed = ref(!useRoute().path.startsWith(props.link._path));
+
+function hideLeftPanel(_: Event)
+{
+    document?.querySelector('.published-container')?.classList.remove('is-left-column-open');
+}
+</script>
+
+<template>
+    <div class="tree-item">
+        <template v-if="hasChildren">
+            <div class="tree-item-self" :class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }" data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed">
+                <div v-if="hasChildren" class="tree-item-icon collapse-icon">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
+                        stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
+                        class="svg-icon right-triangle">
+                        <path d="M3 8L12 17L21 8"></path>
+                    </svg>
+                </div>
+                <div class="tree-item-inner">{{ link.title }}</div>
+            </div>
+            <div v-if="!collapsed" class="tree-item-children">
+                <NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l"/>
+            </div>
+        </template>
+        <NuxtLink @click="hideLeftPanel" v-else class="tree-item-self" :to="'/explorer' + link._path" :active-class="'mod-active'">
+            <div class="tree-item-inner">{{ link.title }}</div>
+        </NuxtLink>
+    </div>
+</template>

components/explorer/RightComponent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface Props
+{
+    toc: Toc;
+}
+const props = defineProps<Props>();
+</script>
+
+<template>
+    <div class="site-body-right-column">
+        <div class="site-body-right-column-inner">
+            <div v-if="!!toc" class="outline-view-outer node-insert-event">
+                <div class="list-item published-section-header">
+                    <span class="published-section-header-icon">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-list">
+                            <line x1="8" y1="6" x2="21" y2="6"></line><line x1="8" y1="12" x2="21" y2="12"></line><line x1="8" y1="18" x2="21" y2="18"></line><line x1="3" y1="6" x2="3.01" y2="6"></line><line x1="3" y1="12" x2="3.01" y2="12"></line>
+                            <line x1="3" y1="18" x2="3.01" y2="18"></line>
+                        </svg>
+                    </span>
+                    <span>Sur cette page</span>
+                </div>
+                <div class="outline-view">
+                    <TocLink v-for="link of toc.links" :link="link"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>

components/explorer/TocLink.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+interface TocItem {
+    text: string
+    id: string
+    children?: TocItem[]
+
+    [key: string]: any
+}
+interface Props {
+    link: TocItem;
+}
+
+const props = defineProps<Props>();
+const hasChildren = computed(() => {
+    return props.link && props.link.children && props.link.children.length > 0 || false;
+});
+</script>
+
+<template>
+    <div class="tree-item">
+        <div class="tree-item-self" :class="{'is-clickable': hasChildren}" data-path="{{ props.link.title }}">
+            <NuxtLink no-prefetch class="tree-item-inner" :href="{hash: '#' + props.link.id}">{{ props.link.text }}</NuxtLink>
+        </div>
+        <div class="tree-item-children">
+            <TocLink v-if="hasChildren" v-for="link of props.link.children" :link="link" />
+        </div>
+    </div>
+</template>