feat(ui): basic sidebar page

Author: SergioRibera

app.vue

@@ -1,6 +1,11 @@
 <script setup>
+  import { useRoute } from 'vue-router'
   import Roadmap from './components/Roadmap.vue'
   import HeroSection from './layouts/hero.vue'
+
+  const route = useRoute()
+  const nodeId = route.params.slug
+
   const title = 'Hoja de Ruta Definitiva para Aprender Rust: Desde Principiante hasta Experto'
   const description = `
 ¿Estás listo para dominar uno de los lenguajes de programación más potentes y eficientes? Nuestra hoja de ruta te guiará paso a paso en tu viaje de aprendizaje de Rust, desde los conceptos básicos hasta las técnicas avanzadas. Diseñada para principiantes y desarrolladores experimentados, esta guía exhaustiva te ayudará a construir una sólida base en Rust y a aprovechar al máximo su rendimiento, seguridad y concurrencia.
@@ -9,7 +14,7 @@ Ya sea que desees desarrollar aplicaciones de sistemas, videojuegos, criptomoned
     `
   useHead({
     bodyAttrs: {
-      class: 'bg-orange-200 dark:bg-[#131313]/90 w-screen min-h-screen bg-center bg-fixed dark:bg-kaku dark:bg-cover dark:bg-blend-darken dark:backdrop-blur-xl overflow-x-hidden dark:text-[#e2cea9]'
+      class: 'bg-orange-200 dark:bg-[#131313]/90 w-screen min-h-screen bg-center bg-fixed dark:bg-kaku dark:bg-cover dark:bg-blend-darken dark:backdrop-blur-xl overflow-x-hidden dark:text-[#e2cea9]' + ((nodeId && !route.query.fromClick) ? ' overflow-hidden' : '')
     }
   })
 
@@ -31,7 +36,5 @@ Ya sea que desees desarrollar aplicaciones de sistemas, videojuegos, criptomoned
 </script>
 
 <template>
-  <Header />
-  <HeroSection />
-  <Roadmap />
+  <NuxtPage />
 </template>

components/FullView.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="right-0 top-0 z-40 flex min-h-screen w-full flex-col overflow-y-auto bg-white p-4 focus:outline-0 sm:p-6">
+    <h2>{{ node.title }}</h2>
+    <p>{{ node.content }}</p>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  node: Object
+})
+</script>

components/NodeCard.vue

@@ -1,5 +1,6 @@
 <script setup>
   import Card from './Card.vue'
+  import { useRouter } from 'vue-router'
   import { useVueFlow } from '@vue-flow/core'
   import { Handle, Position } from '@vue-flow/core'
 
@@ -11,6 +12,7 @@
       bottom: Position.Bottom,
   }
 
+  const router = useRouter()
   const props = defineProps({
     data: Object,
     withoutIcon: {
@@ -30,6 +32,7 @@
   // TODO: open side content
   onNodeClick(({ node }) => {
     if (ignoreTypes.includes(node.type)) return
+    router.push({ path: `/${node.id}`, query: { fromClick: true } })
     console.log(node)
   })
   // TODO: animate all path if have event.node.data.topicLevel.eq()

components/Sidebar.vue

@@ -0,0 +1,10 @@
+<template>
+  <div class="flex h-full w-full flex-col overflow-y-auto bg-white p-4 focus:outline-0 sm:max-w-[600px] sm:p-6">
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  node: Object
+})
+</script>

pages/[slug].vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="sticky right-0 top-0 z-40 w-screen min-h-screen">
+    <Sidebar v-if="showSidebar" :node="nodeData" />
+    <FullView v-else :node="nodeData" />
+  </div>
+  <Header />
+  <HeroSection />
+  <Roadmap />
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router'
+import { ref, onMounted } from 'vue'
+import Sidebar from '@/components/Sidebar.vue'
+import FullView from '@/components/FullView.vue'
+import Roadmap from '@/components/Roadmap.vue'
+import HeroSection from '@/layouts/hero.vue'
+
+const route = useRoute()
+const nodeId = route.params.slug
+const nodeData = ref(null)
+const showSidebar = ref(true)
+
+onMounted(async () => {
+  // Fetch the node data based on the nodeId
+  const response = await fetchNodeData(nodeId)
+  nodeData.value = response
+
+  showSidebar.value = response && (route.query.fromClick || false)
+})
+
+async function fetchNodeData(id) {
+  return {
+    id,
+    title: 'Nodo ' + id,
+    content: 'Contenido del nodo ' + id
+  }
+}
+</script>