Replace front proxy with new SvelteKit frontend app
- Remove the old Hono/Bun proxy server - Add the new `apps/frontend` SvelteKit scaffold and telemetry hook
This commit is contained in:
150
apps/frontend/src/lib/components/nav-user.svelte
Normal file
150
apps/frontend/src/lib/components/nav-user.svelte
Normal file
@@ -0,0 +1,150 @@
|
||||
<script lang="ts">
|
||||
import * as Avatar from "$lib/components/ui/avatar/index.js";
|
||||
import * as DropdownMenu from "$lib/components/ui/dropdown-menu/index.js";
|
||||
import * as Sidebar from "$lib/components/ui/sidebar/index.js";
|
||||
import { useSidebar } from "$lib/components/ui/sidebar/index.js";
|
||||
import { secondaryNavTree } from "$lib/core/constants";
|
||||
import { sessionsVM } from "$lib/domains/account/sessions/sessions.vm.svelte";
|
||||
import { user as userStore } from "$lib/global.stores";
|
||||
import { type User } from "@pkg/logic/domains/user/data";
|
||||
import { resetMode, setMode } from "mode-watcher";
|
||||
import ChevronsUpDown from "~icons/lucide/chevrons-up-down";
|
||||
import LogOut from "~icons/lucide/log-out";
|
||||
import Monitor from "~icons/lucide/monitor";
|
||||
import Moon from "~icons/lucide/moon";
|
||||
import Sun from "~icons/lucide/sun";
|
||||
|
||||
const sidebar = useSidebar();
|
||||
|
||||
let user = $state({
|
||||
name: "",
|
||||
email: "",
|
||||
image: "",
|
||||
...($userStore || {}),
|
||||
} as any as User);
|
||||
|
||||
userStore.subscribe((value) => {
|
||||
if (value) {
|
||||
user = value;
|
||||
}
|
||||
if (user.name.length < 2) {
|
||||
// @ts-ignore
|
||||
user.name = "User";
|
||||
}
|
||||
});
|
||||
|
||||
$inspect(user);
|
||||
|
||||
async function logoutUser() {
|
||||
await sessionsVM.logout();
|
||||
}
|
||||
</script>
|
||||
|
||||
<Sidebar.Menu>
|
||||
<Sidebar.MenuItem>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Sidebar.MenuButton
|
||||
size="lg"
|
||||
class="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
||||
{...props}
|
||||
>
|
||||
<Avatar.Root class="h-8 w-8 rounded-lg">
|
||||
<Avatar.Image src={user.image} alt={user.name} />
|
||||
<Avatar.Fallback class="rounded-lg">
|
||||
{user.name.slice(0, 2).toUpperCase()}
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div
|
||||
class="grid flex-1 text-left text-sm leading-tight"
|
||||
>
|
||||
<span class="truncate font-semibold"
|
||||
>{user.name}</span
|
||||
>
|
||||
<span class="truncate text-xs">{user.email}</span>
|
||||
</div>
|
||||
<ChevronsUpDown class="ml-auto size-4" />
|
||||
</Sidebar.MenuButton>
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content
|
||||
class="w-[var(--bits-dropdown-menu-anchor-width)] min-w-56 rounded-lg"
|
||||
side={sidebar.isMobile ? "bottom" : "right"}
|
||||
align="end"
|
||||
sideOffset={4}
|
||||
>
|
||||
<DropdownMenu.Label class="p-0 font-normal">
|
||||
<div
|
||||
class="flex items-center gap-2 px-1 py-1.5 text-left text-sm"
|
||||
>
|
||||
<Avatar.Root class="h-8 w-8 rounded-lg">
|
||||
<Avatar.Image src={user.image} alt={user.name} />
|
||||
<Avatar.Fallback class="rounded-lg">
|
||||
{user.name.slice(0, 2).toUpperCase()}
|
||||
</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<div
|
||||
class="grid flex-1 text-left text-sm leading-tight"
|
||||
>
|
||||
<span class="truncate font-semibold"
|
||||
>{user.name}</span
|
||||
>
|
||||
<span class="truncate text-xs">{user.email}</span>
|
||||
</div>
|
||||
</div>
|
||||
</DropdownMenu.Label>
|
||||
<DropdownMenu.Separator />
|
||||
|
||||
<DropdownMenu.Group>
|
||||
{#each secondaryNavTree as item (item.title)}
|
||||
<DropdownMenu.Item>
|
||||
<a
|
||||
href={item.url}
|
||||
class="flex h-full w-full items-center gap-2"
|
||||
>
|
||||
<item.icon />
|
||||
<span>{item.title}</span>
|
||||
</a>
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
</DropdownMenu.Group>
|
||||
|
||||
<DropdownMenu.Separator />
|
||||
|
||||
<!-- Theme switcher section -->
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger>
|
||||
<Sun
|
||||
class="h-4 w-4 scale-100 rotate-0 transition-all dark:scale-0 dark:-rotate-90"
|
||||
/>
|
||||
<Moon
|
||||
class="absolute h-4 w-4 scale-0 rotate-90 transition-all dark:scale-100 dark:rotate-0"
|
||||
/>
|
||||
<span>Theme</span>
|
||||
</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.SubContent>
|
||||
<DropdownMenu.Item onclick={() => setMode("light")}>
|
||||
<Sun class="mr-2 h-4 w-4" />
|
||||
<span>Light</span>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onclick={() => setMode("dark")}>
|
||||
<Moon class="mr-2 h-4 w-4" />
|
||||
<span>Dark</span>
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item onclick={() => resetMode()}>
|
||||
<Monitor class="mr-2 h-4 w-4" />
|
||||
<span>System</span>
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Sub>
|
||||
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Item onclick={() => logoutUser()}>
|
||||
<LogOut />
|
||||
Log out
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</Sidebar.MenuItem>
|
||||
</Sidebar.Menu>
|
||||
Reference in New Issue
Block a user