feat(ui): basic sidebar working

Author: SergioRibera

app.vue

@@ -1,7 +1,5 @@
 <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

components/FullView.vue

@@ -12,7 +12,7 @@
   const roadmapNodes = ref([
     { id: 'topics', type: 'topics', position: { x: 0, y: -150 }, data: { topicLevel: 'start' } },
     ...data.value.map(({ title, _path, data: { position, width, sourcePosition, targetPosition, topicLevel, type, align } }) => (
-    { id: _path.substring(1).replaceAll('/', "-").replaceAll('_', ''), type, position, width, label: title, data: { align, topicLevel, sourcePosition, targetPosition } }
+    { id: _path.substring(1), type, position, width, label: title, data: { align, topicLevel, sourcePosition, targetPosition } }
   ))
   ])
 

components/Roadmap.vue

@@ -1,7 +1,27 @@
 <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 class="fixed right-0 top-0 z-40 w-screen h-screen">
+    <div
+        v-if="content"
+        class="right-0 top-0 flex h-full w-full overflow-y-auto flex-col items-center bg-white p-4 focus:outline-0 sm:p-6"
+    >
+      <ContentRenderer :key="content._id" :value="content">
+        <ContentRendererMarkdown class="flex flex-col gap-3 text-black m:max-w-[800px] sm:max-w-[600px]" :value="content" />
+        <div class="flex flex-col items-start w-full m:max-w-[800px] sm:max-w-[600px]">
+          <h4 id="related-content" class="text-black mb-3">
+            <a href="#related-content">Contenido Extra Relacionado</a>
+          </h4>
+          <a
+            class="text-black mb-1"
+            v-for="(link, i) in content.data.externalLinks"
+            :key="i"
+            :href="link.link"
+          >
+            <span v-if="link.english">[Contenido en Ingles]</span>
+            {{link.name}}
+          </a>
+        </div>
+      </ContentRenderer>
+    </div>
   </div>
   <Header />
   <HeroSection />
@@ -11,29 +31,18 @@
 <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)
+const content = ref(null)
 
 onMounted(async () => {
-  // Fetch the node data based on the nodeId
-  const response = await fetchNodeData(nodeId)
-  nodeData.value = response
+  content.value = await queryContent(nodeId).findOne()
+  console.log(content)
 
-  showSidebar.value = response && (route.query.fromClick || false)
+  showSidebar.value = content && (route.query.fromClick || false)
 })
-
-async function fetchNodeData(id) {
-  return {
-    id,
-    title: 'Nodo ' + id,
-    content: 'Contenido del nodo ' + id
-  }
-}
 </script>

components/Sidebar.vue

@@ -0,0 +1,10 @@
+<template>
+  <Header />
+  <HeroSection />
+  <Roadmap />
+</template>
+
+<script setup>
+import Roadmap from '@/components/Roadmap.vue'
+import HeroSection from '@/layouts/hero.vue'
+</script>