Show navigation on space landing on mobile

src/lib/components/PageBar.svelte

@@ -1,32 +1,16 @@
 <script lang="ts">
   import type {Snippet} from "svelte"
-  import {displayRelayUrl} from "@welshman/util"
-  import {page} from "$app/stores"
-  import {decodeRelay} from "@app/core/state"
 
   interface Props {
-    icon?: Snippet
-    title?: Snippet
-    action?: Snippet
-    [key: string]: any
+    children?: Snippet
+    class?: string
   }
 
-  const {...props}: Props = $props()
+  const {children, ...props}: Props = $props()
 </script>
 
 <div data-component="PageBar" class="cw top-sai fixed z-nav p-2 {props.class}">
   <div class="rounded-xl bg-base-100 p-4 shadow-md h-20 md:h-12 flex flex-col justify-center">
-    <div class="flex items-center justify-between gap-4">
-      <div class="ellipsize flex items-center gap-4 whitespace-nowrap">
-        {@render props.icon?.()}
-        {@render props.title?.()}
-      </div>
-      {@render props.action?.()}
-    </div>
-    {#if $page.params.relay}
-      <div class="text-xs text-primary md:hidden">
-        {displayRelayUrl(decodeRelay($page.params.relay))}
-      </div>
-    {/if}
+    {@render children?.()}
   </div>
 </div>

src/lib/components/SecondaryNav.svelte

@@ -1,12 +1,19 @@
 <script lang="ts">
+  import cx from "classnames"
+  import type {Snippet} from "svelte"
+
   interface Props {
-    children?: import("svelte").Snippet
+    class?: string
+    children?: Snippet
   }
 
-  const {children}: Props = $props()
+  const {children, ...props}: Props = $props()
 </script>
 
 <div
-  class="ml-sai mt-sai mb-sai hidden max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 md:flex">
+  class={cx(
+    "ml-sai mt-sai mb-sai max-h-screen w-60 flex-shrink-0 flex-col gap-1 bg-base-300 z-nav hidden md:flex",
+    props.class,
+  )}>
   {@render children?.()}
 </div>