Rework navigation

src/app/components/PrimaryNav.svelte

@@ -36,14 +36,6 @@
 
   const addSpace = () => pushModal(SpaceAdd)
 
-  const gotoHome = () => goto("/home")
-
-  const gotoSpaces = () => goto("/spaces")
-
-  const gotoSpace = (nom: string) => goto(`/spaces/${nom}`)
-
-  const gotoSettings = () => goto("/settings")
-
   let element: HTMLElement
 
   // Set the active highlight element to the offset of the nav item we're focused on
@@ -63,15 +55,15 @@
     style={`top: ${$activeOffset}px`} />
   <div class="flex h-full flex-col justify-between">
     <div>
-      <PrimaryNavItem on:click={gotoHome}>
+      <PrimaryNavItem href="/home">
         <Avatar
           src={$userProfile?.picture}
           class="!h-10 !w-10 border border-solid border-base-300"
           size={7} />
       </PrimaryNavItem>
       {#each $userGroupsByNom.entries() as [nom, qualifiedGroups] (nom)}
         {@const qualifiedGroup = qualifiedGroups[0]}
-        <PrimaryNavItem title={qualifiedGroup?.group.name} on:click={() => gotoSpace(nom)}>
+        <PrimaryNavItem title={qualifiedGroup?.group.name} href="/spaces/{nom}">
           <div class="w-10 rounded-full border border-solid border-base-300">
             <img alt={qualifiedGroup?.group.name} src={qualifiedGroup?.group.picture} />
           </div>
@@ -82,14 +74,14 @@
           <Icon size={7} icon="add-circle" />
         </div>
       </PrimaryNavItem>
-      <PrimaryNavItem title="Browse Spaces" on:click={gotoSpaces}>
+      <PrimaryNavItem title="Discover Spaces" href="/discover">
         <div class="!flex w-10 items-center justify-center">
           <Icon size={6} icon="compass-big" />
         </div>
       </PrimaryNavItem>
     </div>
     <div>
-      <PrimaryNavItem title="Settings" on:click={gotoSettings}>
+      <PrimaryNavItem title="Settings" href="/settings">
         <div class="!flex w-10 items-center justify-center">
           <Icon size={7} icon="settings" />
         </div>

src/app/components/SpaceExit.svelte

@@ -38,9 +38,7 @@
   <h1 class="heading">
     You are leaving <span class="text-primary">{$group?.name || "[no name]"}</span>
   </h1>
-  <p class="text-center">
-    Are you sure you want to leave?
-  </p>
+  <p class="text-center">Are you sure you want to leave?</p>
   <div class="flex flex-row items-center justify-between gap-4">
     <Button class="btn btn-link" on:click={back}>
       <Icon icon="alt-arrow-left" />

src/app/components/SpaceJoin.svelte

@@ -15,7 +15,7 @@
 
   const back = () => history.back()
 
-  const browse = () => goto("/spaces")
+  const browse = () => goto("/discover")
 
   const joinQualifiedGroup = async (id: string) => {
     const [url, nom] = splitGroupId(id)

src/app/routes.ts

@@ -3,18 +3,13 @@ import {userGroupsByNom} from "@app/state"
 
 export const makeSpacePath = (nom: string) => `/spaces/${nom}`
 
-export const getPrimaryNavItem = ($page: Page) => {
-  if ($page.route?.id?.match("^/(spaces|themes)$")) return "discover"
-  if ($page.route?.id?.startsWith("/spaces")) return "space"
-  if ($page.route?.id?.startsWith("/settings")) return "settings"
-  return "home"
-}
+export const getPrimaryNavItem = ($page: Page) => $page.route?.id?.split("/")[1]
 
 export const getPrimaryNavItemIndex = ($page: Page) => {
   switch (getPrimaryNavItem($page)) {
     case "discover":
       return userGroupsByNom.get().size + 2
-    case "space":
+    case "spaces":
       return Array.from(userGroupsByNom.get().keys()).findIndex(nom => nom === $page.params.nom) + 1
     case "settings":
       return userGroupsByNom.get().size + 3

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>

src/routes/+layout.svelte

@@ -8,7 +8,6 @@
   import Toast from "@app/components/Toast.svelte"
   import Landing from "@app/components/Landing.svelte"
   import PrimaryNav from "@app/components/PrimaryNav.svelte"
-  import SecondaryNav from "@app/components/SecondaryNav.svelte"
   import {modals, clearModal} from "@app/modal"
   import {theme} from "@app/theme"
   import {session, sessions, pk, repository} from "@app/base"
@@ -65,10 +64,7 @@
   <div data-theme={$theme}>
     <div class="flex h-screen">
       <PrimaryNav />
-      <SecondaryNav />
-      <div class="max-h-screen flex-grow overflow-auto bg-base-200">
-        <slot />
-      </div>
+      <slot />
     </div>
     <dialog bind:this={dialog} class="modal modal-bottom !z-modal sm:modal-middle">
       {#if prev}

src/routes/discover/+layout.svelte

@@ -0,0 +1,27 @@
+<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"
+</script>
+
+<SecondaryNav>
+  <SecondaryNavSection>
+    <div in:fly>
+      <SecondaryNavItem href="/spaces">
+        <Icon icon="widget" /> Spaces
+      </SecondaryNavItem>
+    </div>
+    <div in:fly={{delay: 50}}>
+      <SecondaryNavItem href="/themes">
+        <Icon icon="pallete-2" /> Themes
+      </SecondaryNavItem>
+    </div>
+  </SecondaryNavSection>
+</SecondaryNav>
+
+<Page>
+  <slot />
+</Page>

src/routes/home/+layout.svelte

@@ -0,0 +1,41 @@
+<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 SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
+  import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
+</script>
+
+<SecondaryNav>
+  <SecondaryNavSection>
+    <div in:fly>
+      <SecondaryNavItem href="/home">
+        <Icon icon="home-smile" /> Home
+      </SecondaryNavItem>
+    </div>
+    <div in:fly={{delay: 50}}>
+      <SecondaryNavItem href="/home/people">
+        <Icon icon="user-heart" /> People
+      </SecondaryNavItem>
+    </div>
+    <div in:fly={{delay: 100}}>
+      <SecondaryNavItem href="/home/notes">
+        <Icon icon="clipboard-text" /> Saved Notes
+      </SecondaryNavItem>
+    </div>
+    <div in:fly={{delay: 150}}>
+      <SecondaryNavHeader>
+        Conversations
+        <div class="cursor-pointer">
+          <Icon icon="add-circle" />
+        </div>
+      </SecondaryNavHeader>
+    </div>
+  </SecondaryNavSection>
+</SecondaryNav>
+
+<Page>
+  <slot />
+</Page>

src/routes/home/+page.svelte

@@ -6,7 +6,7 @@
 
   const createSpace = () => pushModal(SpaceCreate)
 
-  const browseSpaces = () => goto("/spaces")
+  const browseSpaces = () => goto("/discover")
 </script>
 
 <div class="hero min-h-screen bg-base-200">