forked from coracle/flotilla
Rework navigation
This commit is contained in:
Jon Staab
@@ -36,14 +36,6 @@
|
||||
|
||||
const addSpace = () => pushModal(SpaceAdd)
|
||||
|
||||
const gotoHome = () => goto("/home")
|
||||
|
||||
const gotoSpaces = () => goto("/spaces")
|
||||
|
||||
const gotoSpace = (nom: string) => goto(`/spaces/${nom}`)
|
||||
|
||||
const gotoSettings = () => goto("/settings")
|
||||
|
||||
let element: HTMLElement
|
||||
|
||||
// Set the active highlight element to the offset of the nav item we're focused on
|
||||
@@ -63,7 +55,7 @@
|
||||
style={`top: ${$activeOffset}px`} />
|
||||
<div class="flex h-full flex-col justify-between">
|
||||
<div>
|
||||
<PrimaryNavItem on:click={gotoHome}>
|
||||
<PrimaryNavItem href="/home">
|
||||
<Avatar
|
||||
src={$userProfile?.picture}
|
||||
class="!h-10 !w-10 border border-solid border-base-300"
|
||||
@@ -71,7 +63,7 @@
|
||||
</PrimaryNavItem>
|
||||
{#each $userGroupsByNom.entries() as [nom, qualifiedGroups] (nom)}
|
||||
{@const qualifiedGroup = qualifiedGroups[0]}
|
||||
<PrimaryNavItem title={qualifiedGroup?.group.name} on:click={() => gotoSpace(nom)}>
|
||||
<PrimaryNavItem title={qualifiedGroup?.group.name} href="/spaces/{nom}">
|
||||
<div class="w-10 rounded-full border border-solid border-base-300">
|
||||
<img alt={qualifiedGroup?.group.name} src={qualifiedGroup?.group.picture} />
|
||||
</div>
|
||||
@@ -82,14 +74,14 @@
|
||||
<Icon size={7} icon="add-circle" />
|
||||
</div>
|
||||
</PrimaryNavItem>
|
||||
<PrimaryNavItem title="Browse Spaces" on:click={gotoSpaces}>
|
||||
<PrimaryNavItem title="Discover Spaces" href="/discover">
|
||||
<div class="!flex w-10 items-center justify-center">
|
||||
<Icon size={6} icon="compass-big" />
|
||||
</div>
|
||||
</PrimaryNavItem>
|
||||
</div>
|
||||
<div>
|
||||
<PrimaryNavItem title="Settings" on:click={gotoSettings}>
|
||||
<PrimaryNavItem title="Settings" href="/settings">
|
||||
<div class="!flex w-10 items-center justify-center">
|
||||
<Icon size={7} icon="settings" />
|
||||
</div>
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {page} from "$app/stores"
|
||||
import {fly} from "@lib/transition"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
|
||||
import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
|
||||
import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
|
||||
import SecondaryNavForSpace from "@app/components/SecondaryNavForSpace.svelte"
|
||||
import {getPrimaryNavItem} from "@app/routes"
|
||||
</script>
|
||||
|
||||
<div class="flex w-60 flex-col gap-1 bg-base-300">
|
||||
{#if getPrimaryNavItem($page) === "discover"}
|
||||
<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>
|
||||
{:else if getPrimaryNavItem($page) === "space"}
|
||||
{#key $page.params.nom}
|
||||
<SecondaryNavForSpace nom={$page.params.nom} />
|
||||
{/key}
|
||||
{:else if getPrimaryNavItem($page) === "settings"}
|
||||
<!-- pass -->
|
||||
{:else}
|
||||
<SecondaryNavSection>
|
||||
<div in:fly>
|
||||
<SecondaryNavItem href="/home">
|
||||
<Icon icon="home-smile" /> Home
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
<div in:fly={{delay: 50}}>
|
||||
<SecondaryNavItem href="/people">
|
||||
<Icon icon="user-heart" /> People
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
<div in:fly={{delay: 100}}>
|
||||
<SecondaryNavItem href="/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>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -1,70 +0,0 @@
|
||||
<script lang="ts">
|
||||
import {goto} from "$app/navigation"
|
||||
import {fly} from "@lib/transition"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import Popover from "@lib/components/Popover.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>
|
||||
|
||||
<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>
|
||||
<SecondaryNavItem href="/spaces">
|
||||
<Icon icon="hashtag" /> Spaces
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
<div in:fly={{delay: 50}}>
|
||||
<SecondaryNavItem href="/themes">
|
||||
<Icon icon="hashtag" /> Themes
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
</SecondaryNavSection>
|
||||
@@ -38,9 +38,7 @@
|
||||
<h1 class="heading">
|
||||
You are leaving <span class="text-primary">{$group?.name || "[no name]"}</span>
|
||||
</h1>
|
||||
<p class="text-center">
|
||||
Are you sure you want to leave?
|
||||
</p>
|
||||
<p class="text-center">Are you sure you want to leave?</p>
|
||||
<div class="flex flex-row items-center justify-between gap-4">
|
||||
<Button class="btn btn-link" on:click={back}>
|
||||
<Icon icon="alt-arrow-left" />
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
|
||||
const back = () => history.back()
|
||||
|
||||
const browse = () => goto("/spaces")
|
||||
const browse = () => goto("/discover")
|
||||
|
||||
const joinQualifiedGroup = async (id: string) => {
|
||||
const [url, nom] = splitGroupId(id)
|
||||
|
||||
Reference in New Issue
Block a user