Testos

template/app/pages/[...slug].vue

@@ -11,8 +11,56 @@ if (!page.value) {
 </script>
 
 <template>
-  <div class="prose-wrapper" v-if="page">
-    <ContentRenderer :value="page" />
+  <div v-if="page" class="page-layout">
+
+    <aside class="page-tree-sidebar">
+      <PageTree />
+    </aside>
+
+    <div class="docs-container">
+      <div class="docs-layout">
+        <ContentRenderer :value="page" />
+      </div>
+    </div>
   </div>
-  <NotFound />
+  <NotFound v-if="!page" />
 </template>
+
+<style lang="scss">
+.page-layout {
+  display: grid;
+  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
+  justify-content: left;
+  column-gap: 2rem;
+}
+
+.docs-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.docs-layout {
+  h1:first-of-type {
+    margin-top: 80px;
+  }
+  width: 100%;
+  max-width: 800px;
+  padding: 0 1rem;
+}
+
+.page-tree-sidebar {
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
+
+  /* Firefox */
+  scrollbar-width: none;
+
+  /* IE and old Edge */
+  -ms-overflow-style: none;
+    background-color: var(--bg-sidebar);
+}
+</style>