Rework navigation

src/lib/components/Page.svelte

@@ -0,0 +1,3 @@
+<div class="max-h-screen flex-grow overflow-auto bg-base-200">
+  <slot />
+</div>

src/lib/components/PrimaryNavItem.svelte

@@ -2,13 +2,25 @@
   import Button from "@lib/components/Button.svelte"
 
   export let title = ""
+  export let href = ""
 </script>
 
-<Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
-  <div
-    class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
-    class:tooltip={title}
-    data-tip={title}>
-    <slot />
-  </div>
-</Button>
+{#if href}
+  <a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center">
+    <div
+      class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
+      class:tooltip={title}
+      data-tip={title}>
+      <slot />
+    </div>
+  </a>
+{:else}
+  <Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
+    <div
+      class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
+      class:tooltip={title}
+      data-tip={title}>
+      <slot />
+    </div>
+  </Button>
+{/if}

src/lib/components/SecondaryNav.svelte

@@ -0,0 +1,3 @@
+<div class="flex w-60 flex-col gap-1 bg-base-300">
+  <slot />
+</div>