Jon Staab
62 lines
2.1 KiB
Svelte
62 lines
2.1 KiB
Svelte
<style>
|
|
.z-nav-active {
|
|
-webkit-mask-image: url("/nav-active.svg");
|
|
mask-image: url("/nav-active.svg");
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import {goto} from '$app/navigation'
|
|
import Icon from "@lib/components/Icon.svelte"
|
|
import PrimaryNavItem from "@lib/components/PrimaryNavItem.svelte"
|
|
import SpaceAdd from '@app/components/SpaceAdd.svelte'
|
|
import {getGroupName, getGroupPicture, makeGroupId} from "@app/domain"
|
|
import {userGroupRelaysByNom, groupsById} from "@app/state"
|
|
import {pushModal} from "@app/modal"
|
|
|
|
export const addSpace = () => pushModal(SpaceAdd)
|
|
|
|
export const browseSpaces = () => goto("/browse")
|
|
</script>
|
|
|
|
<div class="relative w-14 bg-base-100">
|
|
<div class="absolute -top-[44px] z-nav-active ml-2 h-[144px] w-12 bg-base-300" />
|
|
<div class="flex h-full flex-col justify-between">
|
|
<div>
|
|
<PrimaryNavItem title="Hodlbod">
|
|
<div class="w-10 rounded-full border border-solid border-base-300">
|
|
<img
|
|
alt=""
|
|
src="https://img.daisyui.com/images/stock/photo-1534528741775-53994a69daeb.webp" />
|
|
</div>
|
|
</PrimaryNavItem>
|
|
{#each $userGroupRelaysByNom.entries() as [nom, relays] (nom)}
|
|
{@const event = $groupsById.get(makeGroupId(relays[0], nom))}
|
|
{@const name = getGroupName(event)}
|
|
<PrimaryNavItem title={name}>
|
|
<div class="w-10 rounded-full border border-solid border-base-300">
|
|
<img alt={name} src={getGroupPicture(event)} />
|
|
</div>
|
|
</PrimaryNavItem>
|
|
{/each}
|
|
<PrimaryNavItem title="Add Space" on:click={addSpace}>
|
|
<div class="!flex w-10 items-center justify-center">
|
|
<Icon size={7} icon="add-circle" />
|
|
</div>
|
|
</PrimaryNavItem>
|
|
<PrimaryNavItem title="Browse Spaces" on:click={browseSpaces}>
|
|
<div class="!flex w-10 items-center justify-center">
|
|
<Icon size={6} icon="compass-big" />
|
|
</div>
|
|
</PrimaryNavItem>
|
|
</div>
|
|
<div>
|
|
<PrimaryNavItem title="Settings">
|
|
<div class="!flex w-10 items-center justify-center">
|
|
<Icon size={7} icon="settings" />
|
|
</div>
|
|
</PrimaryNavItem>
|
|
</div>
|
|
</div>
|
|
</div>
|