Rework navigation

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">

src/routes/spaces/+layout.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+  import {goto} from "$app/navigation"
+  import {fly} from "@lib/transition"
+  import Icon from "@lib/components/Icon.svelte"
+  import Page from "@lib/components/Page.svelte"
+  import Button from "@lib/components/Button.svelte"
+  import Popover from "@lib/components/Popover.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"
+  import SpaceExit from "@app/components/SpaceExit.svelte"
+  import {deriveGroup} from "@app/state"
+  import {pushModal} from "@app/modal"
+  import {removeGroupMemberships} from "@app/commands"
+
+  export let nom
+
+  const group = deriveGroup(nom)
+
+  const openMenu = () => {
+    showMenu = true
+  }
+
+  const toggleMenu = () => {
+    showMenu = !showMenu
+  }
+
+  const leaveSpace = () => pushModal(SpaceExit, {nom})
+
+  let showMenu = false
+</script>
+
+<SecondaryNav>
+  <SecondaryNavSection>
+    <div>
+      <SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
+        <strong>{$group?.name || "[no name]"}</strong>
+        <Icon icon="alt-arrow-down" />
+      </SecondaryNavItem>
+      {#if showMenu}
+        <Popover onClose={toggleMenu}>
+          <ul
+            transition:fly|local
+            class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
+            <li class="text-error">
+              <Button on:click={leaveSpace}>
+                <Icon icon="exit" />
+                Leave Space
+              </Button>
+            </li>
+          </ul>
+        </Popover>
+      {/if}
+    </div>
+    <div class="h-2" />
+    <SecondaryNavHeader>
+      Rooms
+      <div class="cursor-pointer">
+        <Icon icon="add-circle" />
+      </div>
+    </SecondaryNavHeader>
+    <div in:fly|local>
+      <SecondaryNavItem href="/invalid">
+        <Icon icon="hashtag" /> Spaces
+      </SecondaryNavItem>
+    </div>
+    <div in:fly|local={{delay: 50}}>
+      <SecondaryNavItem href="/invalid">
+        <Icon icon="hashtag" /> Themes
+      </SecondaryNavItem>
+    </div>
+  </SecondaryNavSection>
+</SecondaryNav>
+
+<Page>
+  <slot />
+</Page>