bretton.dev
Coves frontend - a photon fork
1<script lang="ts">
2 import { profile } from '$lib/app/auth.svelte'
3 import { t } from '$lib/app/i18n'
4 import { LINKED_INSTANCE_URL } from '$lib/app/instance.svelte'
5 import { theme } from '$lib/app/theme/theme.svelte'
6 import ProfileSelection from '$lib/feature/user/ProfileSelection.svelte'
7 import { Option, Select } from 'mono-svelte'
8 import {
9 ArrowLeftOnRectangle,
10 Bookmark,
11 ChevronUpDown,
12 Cog6Tooth,
13 ComputerDesktop,
14 Home,
15 Icon,
16 Identification,
17 Inbox,
18 Moon,
19 Sun,
20 Swatch,
21 UserCircle,
22 UserGroup,
23 } from 'svelte-hero-icons/dist'
24 import type { ClassValue } from 'svelte/elements'
25 import EndPlaceholder from '../layout/EndPlaceholder.svelte'
26 import SidebarButton from './SidebarButton.svelte'
27
28 interface Props {
29 style?: string
30 class?: ClassValue
31 }
32
33 let { style = '', class: clazz = '' }: Props = $props()
34</script>
35
36<nav
37 aria-label={$t('aria.sidebar.title')}
38 class={['flex flex-col overflow-auto gap-1', clazz]}
39 {style}
40>
41 <SidebarButton href="/" label={$t('nav.home')} icon={Home} exact />
42 <ProfileSelection
43 selectable={!(
44 LINKED_INSTANCE_URL &&
45 !profile.current.jwt &&
46 profile.meta.profiles.length == 1
47 )}
48 profiles={profile.meta.profiles}
49 />
50 <EndPlaceholder margin="sm" size="xs">{$t('profile.profile')}</EndPlaceholder>
51 {#if profile.current?.jwt}
52 <!-- TODO: Re-enable inbox notifications when Coves API provides them -->
53 <SidebarButton
54 icon={UserCircle}
55 href={profile.current.type === 'authenticated'
56 ? `/profile/${encodeURIComponent(profile.current.handle)}`
57 : '/login'}
58 label={$t('profile.profile')}
59 />
60 <SidebarButton icon={Inbox} href="/inbox" label={$t('profile.inbox')} />
61 <SidebarButton icon={Bookmark} href="/saved" label={$t('profile.saved')} />
62 {:else}
63 <SidebarButton
64 href="/login"
65 label={$t('account.login')}
66 icon={ArrowLeftOnRectangle}
67 />
68 <SidebarButton
69 href="/signup"
70 label={$t('account.signup')}
71 icon={Identification}
72 />
73 <SidebarButton
74 href="/accounts"
75 label={$t('account.accounts')}
76 icon={UserGroup}
77 />
78 {/if}
79 <EndPlaceholder margin="sm" size="xs">{$t('nav.menu.app')}</EndPlaceholder>
80 <SidebarButton
81 href="/settings"
82 label={$t('nav.menu.settings')}
83 icon={Cog6Tooth}
84 />
85 <Select bind:value={theme.colorScheme} size="sm">
86 {#snippet target(attachment)}
87 <SidebarButton
88 {@attach attachment}
89 label={$t('nav.menu.colorscheme.label')}
90 icon={theme.colorScheme == 'system'
91 ? ComputerDesktop
92 : theme.colorScheme == 'light'
93 ? Sun
94 : Moon}
95 class="w-full relative"
96 >
97 <Option value="system" class="hidden" icon={ComputerDesktop}>
98 {$t('nav.menu.colorscheme.system')}
99 </Option>
100 <Option value="light" class="hidden" icon={Sun}>
101 {$t('nav.menu.colorscheme.light')}
102 </Option>
103 <Option value="dark" class="hidden" icon={Moon}>
104 {$t('nav.menu.colorscheme.dark')}
105 </Option>
106 <Icon micro size="16" src={ChevronUpDown} class="ml-auto" />
107 </SidebarButton>
108 {/snippet}
109 </Select>
110 <SidebarButton href="/theme" label={$t('nav.menu.theme')} icon={Swatch} />
111 <!-- TODO: Re-enable communities/moderates lists when Coves API provides user data -->
112
113 <div class="flex-1 h-full mt-auto"></div>
114</nav>