Tweaks to navigation

src/routes/spaces/[relay]/+layout.svelte

@@ -2,16 +2,11 @@
   import {onMount} from "svelte"
   import {page} from "$app/stores"
   import {load} from "@welshman/app"
-  import Icon from "@lib/components/Icon.svelte"
   import Page from "@lib/components/Page.svelte"
   import Delay from "@lib/components/Delay.svelte"
-  import Button from "@lib/components/Button.svelte"
   import SecondaryNav from "@lib/components/SecondaryNav.svelte"
   import MenuSpace from "@app/components/MenuSpace.svelte"
   import {decodeRelay, MEMBERSHIPS} from "@app/state"
-  import {pushDrawer} from "@app/modal"
-
-  const openMenu = () => pushDrawer(MenuSpace, {url})
 
   $: url = decodeRelay($page.params.relay)
 
@@ -35,9 +30,3 @@
     </Page>
   </Delay>
 {/key}
-
-<div class="fixed right-7 top-7 z-feature md:hidden">
-  <Button on:click={openMenu}>
-    <Icon icon="menu-dots" />
-  </Button>
-</div>

src/routes/spaces/[relay]/[[room]]/+page.svelte

@@ -22,6 +22,7 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import Divider from "@lib/components/Divider.svelte"
+  import MenuSpace from "@app/components/MenuSpace.svelte"
   import ChannelMessage from "@app/components/ChannelMessage.svelte"
   import ChannelCompose from "@app/components/ChannelCompose.svelte"
   import {
@@ -35,12 +36,15 @@
     getMembershipRoomsByUrl,
   } from "@app/state"
   import {addRoomMembership, removeRoomMembership} from "@app/commands"
+  import {pushDrawer} from "@app/modal"
 
   const {room = GENERAL} = $page.params
   const url = decodeRelay($page.params.relay)
   const channel = deriveChannel(makeChannelId(url, room))
   const thunks = writable({} as Record<string, Thunk>)
 
+  const openMenu = () => pushDrawer(MenuSpace, {url})
+
   const assertEvent = (e: any) => e as TrustedEvent
 
   const onSubmit = ({content, tags}: EventContent) => {
@@ -96,7 +100,7 @@
       <Icon icon="hashtag" />
     </div>
     <strong slot="title">{room}</strong>
-    <div slot="action">
+    <div slot="action" class="row-2">
       {#if room !== GENERAL}
         {#if getMembershipRoomsByUrl(url, $userMembership).includes(room)}
           <Button class="btn btn-neutral btn-sm" on:click={() => removeRoomMembership(url, room)}>
@@ -110,6 +114,9 @@
           </Button>
         {/if}
       {/if}
+      <Button on:click={openMenu} class="btn btn-neutral btn-sm">
+        <Icon icon="menu-dots" />
+      </Button>
     </div>
   </PageBar>
   <div class="-mt-2 flex flex-grow flex-col-reverse overflow-auto py-2">

src/routes/spaces/[relay]/calendar/+page.svelte

@@ -10,15 +10,18 @@
   import Spinner from "@lib/components/Spinner.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import Divider from "@lib/components/Divider.svelte"
+  import MenuSpace from "@app/components/MenuSpace.svelte"
   import EventItem from "@app/components/EventItem.svelte"
   import EventCreate from "@app/components/EventCreate.svelte"
-  import {pushModal} from "@app/modal"
+  import {pushModal, pushDrawer} from "@app/modal"
   import {deriveEventsForUrl, pullConservatively, decodeRelay} from "@app/state"
 
   const url = decodeRelay($page.params.relay)
   const kinds = [EVENT_DATE, EVENT_TIME]
   const events = deriveEventsForUrl(url, kinds)
 
+  const openMenu = () => pushDrawer(MenuSpace, {url})
+
   const createEvent = () => pushModal(EventCreate, {url})
 
   const getEnd = (event: TrustedEvent) => parseInt(event.tags.find(t => t[0] === "end")?.[1] || "")
@@ -69,6 +72,11 @@
       <Icon icon="calendar-minimalistic" />
     </div>
     <strong slot="title">Calendar</strong>
+    <div slot="action" class="md:hidden">
+      <Button on:click={openMenu} class="btn btn-neutral btn-sm">
+        <Icon icon="menu-dots" />
+      </Button>
+    </div>
   </PageBar>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2">
     {#each items as { event, dateDisplay }, i (event.id)}

src/routes/spaces/[relay]/threads/+page.svelte

@@ -10,10 +10,11 @@
   import Button from "@lib/components/Button.svelte"
   import PageBar from "@lib/components/PageBar.svelte"
   import Spinner from "@lib/components/Spinner.svelte"
+  import MenuSpace from "@app/components/MenuSpace.svelte"
   import ThreadItem from "@app/components/ThreadItem.svelte"
   import ThreadCreate from "@app/components/ThreadCreate.svelte"
-  import {pushModal} from "@app/modal"
   import {deriveEventsForUrl, decodeRelay} from "@app/state"
+  import {pushModal, pushDrawer} from "@app/modal"
 
   const url = decodeRelay($page.params.relay)
   const kinds = [NOTE]
@@ -21,6 +22,8 @@
   const events = deriveEventsForUrl(url, kinds)
   const loader = feedLoader.getLoader(feed, {})
 
+  const openMenu = () => pushDrawer(MenuSpace, {url})
+
   const createThread = () => pushModal(ThreadCreate, {url})
 
   let limit = 5
@@ -52,6 +55,11 @@
       <Icon icon="notes-minimalistic" />
     </div>
     <strong slot="title">Threads</strong>
+    <div slot="action" class="md:hidden">
+      <Button on:click={openMenu} class="btn btn-neutral btn-sm">
+        <Icon icon="menu-dots" />
+      </Button>
+    </div>
   </PageBar>
   <div class="flex flex-grow flex-col gap-2 overflow-auto p-2" bind:this={element}>
     {#each $events.slice(0, limit) as event (event.id)}