Generate username color based on hash

src/routes/settings/+layout.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import SecondaryNav from "@lib/components/SecondaryNav.svelte"
+  import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+  import LogOut from "@app/components/LogOut.svelte"
+  import {pushModal} from "@app/modal"
+
+  const logout = () => pushModal(LogOut)
+</script>
+
+<SecondaryNav>
+  <SecondaryNavSection>
+    <div in:fly|local>
+      <SecondaryNavItem href="/settings">
+        <Icon icon="settings" /> Settings
+      </SecondaryNavItem>
+    </div>
+    <div in:fly|local={{delay: 50}}>
+      <SecondaryNavItem class="text-error hover:text-error" on:click={logout}>
+        <Icon icon="exit" /> Log Out
+      </SecondaryNavItem>
+    </div>
+  </SecondaryNavSection>
+</SecondaryNav>
+
+<Page>
+  <slot />
+</Page>

src/routes/settings/+page.svelte

@@ -0,0 +1 @@
+Settings: who needs em?