userAdityaa/flotilla
1
0
Fork 0
forked from coracle/flotilla
Code Pull Requests Activity

Rework navigation

Browse Source
This commit is contained in:
Jon Staab
2024-08-16 11:12:14 -07:00
parent bd8fcd3264
commit 6796f1c107
18 changed files with 182 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/components/PrimaryNav.svelte
+4 -12
View File
@@ -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>
src/app/components/SecondaryNav.svelte
-59
View File
@@ -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>
src/app/components/SecondaryNavForSpace.svelte
-70
View File
@@ -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>
src/app/components/SpaceExit.svelte
+1 -3
View File
@@ -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" />
src/app/components/SpaceJoin.svelte
+1 -1
View File
@@ -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)
src/app/routes.ts
+2 -7
View File
@@ -3,18 +3,13 @@ import {userGroupsByNom} from "@app/state"
export const makeSpacePath = (nom: string) => `/spaces/${nom}`
export const getPrimaryNavItem = ($page: Page) => {
if ($page.route?.id?.match("^/(spaces|themes)$")) return "discover"
if ($page.route?.id?.startsWith("/spaces")) return "space"
if ($page.route?.id?.startsWith("/settings")) return "settings"
return "home"
}
export const getPrimaryNavItem = ($page: Page) => $page.route?.id?.split("/")[1]
export const getPrimaryNavItemIndex = ($page: Page) => {
switch (getPrimaryNavItem($page)) {
case "discover":
return userGroupsByNom.get().size + 2
case "space":
case "spaces":
return Array.from(userGroupsByNom.get().keys()).findIndex(nom => nom === $page.params.nom) + 1
case "settings":
return userGroupsByNom.get().size + 3
src/lib/components/Page.svelte
+3
View File
@@ -0,0 +1,3 @@
<div class="max-h-screen flex-grow overflow-auto bg-base-200">
<slot />
</div>
src/lib/components/PrimaryNavItem.svelte
+20 -8
View File
@@ -2,13 +2,25 @@
import Button from "@lib/components/Button.svelte"
export let title = ""
export let href = ""
</script>
<Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
<div
class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
class:tooltip={title}
data-tip={title}>
<slot />
</div>
</Button>
{#if href}
<a {href} class="relative z-nav-item flex h-14 w-14 items-center justify-center">
<div
class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
class:tooltip={title}
data-tip={title}>
<slot />
</div>
</a>
{:else}
<Button on:click class="relative z-nav-item flex h-14 w-14 items-center justify-center">
<div
class="avatar tooltip-right cursor-pointer rounded-full bg-base-300 p-1"
class:tooltip={title}
data-tip={title}>
<slot />
</div>
</Button>
{/if}
src/lib/components/SecondaryNav.svelte
+3
View File
@@ -0,0 +1,3 @@
<div class="flex w-60 flex-col gap-1 bg-base-300">
<slot />
</div>
src/routes/+layout.svelte
+1 -5
View File
@@ -8,7 +8,6 @@
import Toast from "@app/components/Toast.svelte"
import Landing from "@app/components/Landing.svelte"
import PrimaryNav from "@app/components/PrimaryNav.svelte"
import SecondaryNav from "@app/components/SecondaryNav.svelte"
import {modals, clearModal} from "@app/modal"
import {theme} from "@app/theme"
import {session, sessions, pk, repository} from "@app/base"
@@ -65,10 +64,7 @@
<div data-theme={$theme}>
<div class="flex h-screen">
<PrimaryNav />
<SecondaryNav />
<div class="max-h-screen flex-grow overflow-auto bg-base-200">
<slot />
</div>
<slot />
</div>
<dialog bind:this={dialog} class="modal modal-bottom !z-modal sm:modal-middle">
{#if prev}
src/routes/discover/+layout.svelte
+27
View File
@@ -0,0 +1,27 @@
<script lang="ts">
import {fly} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte"
import Page from "@lib/components/Page.svelte"
import SecondaryNav from "@lib/components/SecondaryNav.svelte"
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
</script>
<SecondaryNav>
<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>
</SecondaryNav>
<Page>
<slot />
</Page>
src/routes/spaces/+page.svelte → src/routes/discover/+page.svelte
View File
src/routes/themes/+page.svelte → src/routes/discover/themes/+page.svelte
View File
src/routes/home/+layout.svelte
+41
View File
@@ -0,0 +1,41 @@
<script lang="ts">
import {fly} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte"
import Page from "@lib/components/Page.svelte"
import SecondaryNav from "@lib/components/SecondaryNav.svelte"
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
</script>
<SecondaryNav>
<SecondaryNavSection>
<div in:fly>
<SecondaryNavItem href="/home">
<Icon icon="home-smile" /> Home
</SecondaryNavItem>
</div>
<div in:fly={{delay: 50}}>
<SecondaryNavItem href="/home/people">
<Icon icon="user-heart" /> People
</SecondaryNavItem>
</div>
<div in:fly={{delay: 100}}>
<SecondaryNavItem href="/home/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>
</SecondaryNav>
<Page>
<slot />
</Page>
src/routes/home/+page.svelte
+1 -1
View File
@@ -6,7 +6,7 @@
const createSpace = () => pushModal(SpaceCreate)
const browseSpaces = () => goto("/spaces")
const browseSpaces = () => goto("/discover")
</script>
<div class="hero min-h-screen bg-base-200">
src/routes/notes/+page.svelte → src/routes/home/notes/+page.svelte
View File
src/routes/people/+page.svelte → src/routes/home/people/+page.svelte
View File
src/routes/spaces/+layout.svelte
+78
View File
@@ -0,0 +1,78 @@
<script lang="ts">
import {goto} from "$app/navigation"
import {fly} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte"
import Page from "@lib/components/Page.svelte"
import Button from "@lib/components/Button.svelte"
import Popover from "@lib/components/Popover.svelte"
import SecondaryNav from "@lib/components/SecondaryNav.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>
<SecondaryNav>
<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|local>
<SecondaryNavItem href="/invalid">
<Icon icon="hashtag" /> Spaces
</SecondaryNavItem>
</div>
<div in:fly|local={{delay: 50}}>
<SecondaryNavItem href="/invalid">
<Icon icon="hashtag" /> Themes
</SecondaryNavItem>
</div>
</SecondaryNavSection>
</SecondaryNav>
<Page>
<slot />
</Page>