Styling basics

src/routes/(app)/+layout.server.js

@@ -0,0 +1,10 @@
+import { getCategories } from "$lib/server/db/category";
+
+/** @type {import("@sveltejs/kit").ServerLoad} */
+export async function load({ locals }) {
+  const categories = await getCategories(locals.sql);
+
+  return {
+    categories: categories
+  };
+}

src/routes/(app)/+layout.svelte

@@ -1,11 +1,34 @@
+<script>
+  import Sidebar from "$comp/sidebar.svelte";
+
+  /**
+   * @type {{
+   *  categories: import("$types/base").Category[]
+   * }}
+   */
+  export let data;
+
+  $: categories = data.categories;
+</script>
+
 <style>
   .content {
-    margin: 16px;
-    width: calc(100% - 16px);
+    display: flex;
+    flex-direction: row;
+    /* width: calc(100% - 16px); */
     height: 100%;
   }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
 </style>
 
 <div class="content">
-  <slot />
+  <Sidebar categories={categories}></Sidebar>
+  <main>
+    <slot />
+  </main>
 </div>

src/routes/(app)/posts/[name]/+page.svelte

@@ -1,5 +1,7 @@
 <script>
     import Comment from "$comp/comment.svelte";
+    import Mention from "$comp/mention.svelte";
+    import UserItem from "$comp/useritem.svelte";
     import { buildCommentTree } from "$lib/client/nodetree";
     import { getNamedId, gotoNamedId } from "$lib/util";
     import { onMount } from "svelte";
@@ -36,11 +38,7 @@
 <div class="post">
   <h1 class="taviraj-light">{post.name}</h1>
 
-  {#if post.author}
-  <a href="/users/{getNamedId(post.author.id, post.author.name)}">{post.author.name}</a>
-  {:else}
-  <p>Deleted</p>
-  {/if}
+  <UserItem user={post.author}></UserItem>
 
   <p>{post.content}</p>