flotilla/src/app/components/SpaceMenu.svelte
Aditya Chaudhary 9c68f66c39 fix: replace mobile space menu popover with a bottom-sheet action menu (#330)
Co-authored-by: Aditya Chaudhary <30+useradityaa@noreply.coracle.social>
2026-08-07 21:05:17 +00:00

59 lines
2.3 KiB
Svelte

<script lang="ts">
import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
import SpaceMenuHeader from "@app/components/SpaceMenuHeader.svelte"
import SpaceMenuNavItems from "@app/components/SpaceMenuNavItems.svelte"
import SpaceMenuRooms from "@app/components/SpaceMenuRooms.svelte"
import Link from "@lib/components/Link.svelte"
import VoiceWidget from "@app/components/VoiceWidget.svelte"
import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
import {makeSpacePath} from "@app/routes"
type Props = {
url: string
mobile?: boolean
}
const {url, mobile = false}: Props = $props()
</script>
<div class="flex min-h-0 flex-1 flex-col">
{#if mobile}
<SecondaryNavSection class="space-menu min-h-0 flex-1 flex flex-col gap-3 p-0">
<div class="card space-menu__card space-menu__header shrink-0 z-nav-item">
<SpaceMenuHeader {url} mobile />
</div>
<div class="space-menu__scroll flex flex-col -mt-12 pt-12 -mb-8 pb-8">
<div class="card space-menu__card flex flex-col gap-1">
<SecondaryNavHeader>Space</SecondaryNavHeader>
<SpaceMenuNavItems {url} />
</div>
<SpaceMenuRooms {url} mobile />
</div>
<div class="card space-menu__card space-menu__status shrink-0 z-nav-item">
<VoiceWidget />
<Link href={makeSpacePath(url, "about")} class="space-menu__status-link">
<SocketStatusIndicator {url} />
</Link>
</div>
</SecondaryNavSection>
{:else}
<SecondaryNavSection class="min-h-0 flex-1 flex flex-col pb-0">
<div class="shrink-0">
<SpaceMenuHeader {url} />
</div>
<div
class="space-menu__scroll flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto py-1">
<SpaceMenuNavItems {url} />
<SpaceMenuRooms {url} />
<div class="h-5 shrink-0"></div>
</div>
</SecondaryNavSection>
<div class="flex shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-1 md:pb-2 z-nav">
<VoiceWidget />
<Link href={makeSpacePath(url, "about")} class="button button-neutral button-sm h-10">
<SocketStatusIndicator {url} />
</Link>
</div>
{/if}
</div>