1 files changed, 64 insertions, 0 deletions
diff --git a/code/app/src/routes/book/+layout.svelte b/code/app/src/routes/book/+layout.svelte
new file mode 100644
index 0000000..aeed0d4
--- /dev/null
+++ b/code/app/src/routes/book/+layout.svelte
@@ -0,0 +1,64 @@
+<script>
+    import { page } from "$app/stores";
+    import "../../app.pcss";
+</script>
+
+<div id="wrapper">
+    <nav>
+        <a
+            href="/book/alerts"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/alerts")}
+            >Alerts</a
+        >
+        <a
+            href="/book/buttons"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/buttons")}
+            >Buttons</a
+        >
+        <a
+            href="/book/toggles"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/toggles")}
+            >Toggles</a
+        >
+        <a
+            href="/book/inputs"
+            class="link"
+            class:active={$page.url.pathname.startsWith("/book/inputs")}
+            >Inputs</a
+        >
+    </nav>
+    <main>
+        <slot />
+    </main>
+</div>
+
+<style global lang="postcss">
+    #wrapper {
+        display: flex;
+        flex-direction: row;
+    }
+    nav {
+        min-width: 120px;
+        padding: 10px;
+        display: flex;
+        flex-direction: column;
+        position: sticky;
+        position: -webkit-sticky;
+        top: 0;
+        height: fit-content;
+    }
+    main {
+        width: 100%;
+        padding: 10px;
+    }
+    section {
+        margin-bottom: 25px;
+
+        h2 {
+            margin-bottom: 5px;
+        }
+    }
+</style>