igm
7358129802
- Add type assertions for dynamic route paths in goto() and resolve()
- Add missing key attributes to {#each} blocks
- Wrap navigation hrefs with resolve() for SvelteKit compatibility
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
234 lines
10 KiB
Svelte
234 lines
10 KiB
Svelte
<script lang="ts">
|
|
import { createQuery, useQueryClient } from "@tanstack/svelte-query";
|
|
import { goto } from "$app/navigation";
|
|
import { resolve } from "$app/paths";
|
|
import { page } from "$app/stores";
|
|
import { api } from "$lib/api/client";
|
|
import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
|
|
import { cn } from "$lib/utils.js";
|
|
|
|
interface Props {
|
|
class?: string;
|
|
}
|
|
|
|
let { class: className }: Props = $props();
|
|
|
|
// Fetch current user
|
|
const userQuery = createQuery(() => ({
|
|
queryKey: ["me"],
|
|
queryFn: () => api.me.get(),
|
|
}));
|
|
|
|
const user = $derived(userQuery.data);
|
|
|
|
// Generate initials from display name or email
|
|
const initials = $derived.by(() => {
|
|
if (!user) {
|
|
return "??";
|
|
}
|
|
if (user.displayName) {
|
|
const parts = user.displayName.split(" ");
|
|
if (parts.length >= 2) {
|
|
return (
|
|
parts[0].charAt(0) + parts[parts.length - 1].charAt(0)
|
|
).toUpperCase();
|
|
}
|
|
return user.displayName.slice(0, 2).toUpperCase();
|
|
}
|
|
return user.email.slice(0, 2).toUpperCase();
|
|
});
|
|
|
|
const queryClient = useQueryClient();
|
|
|
|
async function handleSignOut() {
|
|
try {
|
|
await api.auth.logout();
|
|
queryClient.clear();
|
|
goto(resolve("/auth/login"));
|
|
} catch (error) {
|
|
console.error("Failed to sign out:", error);
|
|
}
|
|
}
|
|
|
|
// Admin nav items
|
|
const navItems = [
|
|
{ icon: "dashboard", href: "/admin", label: "Dashboard" },
|
|
{ icon: "building", href: "/admin/orgs", label: "Organizations" },
|
|
{ icon: "users", href: "/admin/users", label: "Users" },
|
|
];
|
|
</script>
|
|
|
|
<aside
|
|
class={cn(
|
|
"flex h-screen w-[80px] flex-col items-center bg-zinc-900",
|
|
className,
|
|
)}
|
|
>
|
|
<!-- Admin Logo -->
|
|
<div class="flex h-[94px] items-center justify-center">
|
|
<a
|
|
href={resolve("/admin")}
|
|
class="group flex h-8 w-8 items-center justify-center rounded-lg bg-red-600 shadow-sm transition-transform duration-200 hover:scale-105"
|
|
aria-label="Admin Home"
|
|
>
|
|
<svg
|
|
class="h-4 w-4 text-white transition-transform duration-200 group-hover:scale-110"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2.5"
|
|
>
|
|
<path d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Main Navigation -->
|
|
<nav class="flex flex-1 flex-col items-center gap-3">
|
|
{#each navItems as item (item.href)}
|
|
{@const isActive =
|
|
item.href === "/admin"
|
|
? $page.url.pathname === "/admin"
|
|
: $page.url.pathname.startsWith(item.href)}
|
|
<a
|
|
href={resolve(item.href as any)}
|
|
class={cn(
|
|
"group relative flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150",
|
|
isActive
|
|
? "bg-zinc-700 text-white"
|
|
: "text-zinc-400 hover:bg-zinc-800 hover:text-zinc-200",
|
|
)}
|
|
aria-label={item.label}
|
|
aria-current={isActive ? "page" : undefined}
|
|
>
|
|
{#if item.icon === "dashboard"}
|
|
{#if isActive}
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z" />
|
|
</svg>
|
|
{:else}
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
|
|
<rect x="3" y="3" width="7" height="9" rx="1" stroke-linecap="round" stroke-linejoin="round" />
|
|
<rect x="14" y="3" width="7" height="5" rx="1" stroke-linecap="round" stroke-linejoin="round" />
|
|
<rect x="14" y="12" width="7" height="9" rx="1" stroke-linecap="round" stroke-linejoin="round" />
|
|
<rect x="3" y="16" width="7" height="5" rx="1" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
{/if}
|
|
{:else if item.icon === "building"}
|
|
{#if isActive}
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M4.5 2.25a.75.75 0 000 1.5v16.5h-.75a.75.75 0 000 1.5h16.5a.75.75 0 000-1.5h-.75V3.75a.75.75 0 000-1.5h-15zM9 6a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm-.75 3.75A.75.75 0 019 9h1.5a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM9 12a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm3.75-5.25A.75.75 0 0113.5 6H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM13.5 9a.75.75 0 000 1.5H15A.75.75 0 0015 9h-1.5zm-.75 3.75a.75.75 0 01.75-.75H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM9 19.5v-2.25a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75v2.25H9z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
{:else}
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
|
|
<path d="M3 21h18M5 21V5a2 2 0 012-2h10a2 2 0 012 2v16" stroke-linecap="round" stroke-linejoin="round" />
|
|
<path d="M9 6.5h1.5M9 10h1.5M9 13.5h1.5M13.5 6.5H15M13.5 10H15M13.5 13.5H15M9 21v-4h6v4" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
{/if}
|
|
{:else if item.icon === "users"}
|
|
{#if isActive}
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M8.25 6.75a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0zM15.75 9.75a3 3 0 116 0 3 3 0 01-6 0zM2.25 9.75a3 3 0 116 0 3 3 0 01-6 0zM6.31 15.117A6.745 6.745 0 0112 12a6.745 6.745 0 016.709 7.498.75.75 0 01-.372.568A12.696 12.696 0 0112 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 01-.372-.568 6.787 6.787 0 011.019-4.38z" />
|
|
<path d="M5.082 14.254a8.287 8.287 0 00-1.308 5.135 9.687 9.687 0 01-1.764-.44l-.115-.04a.563.563 0 01-.373-.487l-.01-.121a3.75 3.75 0 013.57-4.047zM20.226 19.389a8.287 8.287 0 00-1.308-5.135 3.75 3.75 0 013.57 4.047l-.01.121a.563.563 0 01-.373.486l-.115.04c-.567.2-1.156.349-1.764.441z" />
|
|
</svg>
|
|
{:else}
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
|
|
<path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2" stroke-linecap="round" stroke-linejoin="round" />
|
|
<circle cx="9" cy="7" r="4" />
|
|
<path d="M23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
{/if}
|
|
{/if}
|
|
|
|
<!-- Tooltip -->
|
|
<span
|
|
class="pointer-events-none absolute left-full ml-3 whitespace-nowrap rounded-md bg-zinc-700 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition-all duration-150 group-hover:opacity-100"
|
|
>
|
|
{item.label}
|
|
</span>
|
|
</a>
|
|
{/each}
|
|
</nav>
|
|
|
|
<!-- Bottom section -->
|
|
<div class="flex flex-col items-center gap-3 pb-6">
|
|
<!-- Back to Dashboard link -->
|
|
<a
|
|
href={resolve("/dashboard")}
|
|
class="group relative flex h-8 w-8 items-center justify-center rounded-lg text-zinc-400 transition-all duration-150 hover:bg-zinc-800 hover:text-zinc-200"
|
|
aria-label="Back to Dashboard"
|
|
>
|
|
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
|
|
<path d="M19 12H5M12 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
<span
|
|
class="pointer-events-none absolute left-full ml-3 whitespace-nowrap rounded-md bg-zinc-700 px-2.5 py-1.5 text-xs font-medium text-white opacity-0 shadow-lg transition-all duration-150 group-hover:opacity-100"
|
|
>
|
|
Back to Dashboard
|
|
</span>
|
|
</a>
|
|
|
|
<!-- User Menu -->
|
|
<DropdownMenu.Root>
|
|
<DropdownMenu.Trigger>
|
|
{#snippet child({ props })}
|
|
<button
|
|
{...props}
|
|
class="relative h-6 w-6 overflow-hidden rounded-full ring-1 ring-zinc-700 transition-transform duration-150 hover:scale-110"
|
|
aria-label="User menu"
|
|
>
|
|
{#if user?.avatarUrl}
|
|
<img src={user.avatarUrl} alt="" class="h-full w-full object-cover" />
|
|
{:else}
|
|
<div
|
|
class="flex h-full w-full items-center justify-center bg-gradient-to-br from-red-500 to-red-700 text-[10px] font-semibold text-white"
|
|
>
|
|
{initials}
|
|
</div>
|
|
{/if}
|
|
</button>
|
|
{/snippet}
|
|
</DropdownMenu.Trigger>
|
|
<DropdownMenu.Content class="w-64" side="right" align="end" sideOffset={8}>
|
|
<!-- User info header -->
|
|
<div class="flex items-center gap-3 p-2">
|
|
{#if user?.avatarUrl}
|
|
<img src={user.avatarUrl} alt="" class="h-10 w-10 rounded-full object-cover" />
|
|
{:else}
|
|
<div
|
|
class="flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-red-500 to-red-700 text-sm font-semibold text-white"
|
|
>
|
|
{initials}
|
|
</div>
|
|
{/if}
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-medium">{user?.displayName ?? user?.email ?? "Loading..."}</span>
|
|
<span class="text-xs text-muted-foreground">Admin</span>
|
|
</div>
|
|
</div>
|
|
<DropdownMenu.Separator />
|
|
<DropdownMenu.Item onSelect={() => goto(resolve("/account"))}>
|
|
<svg class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
|
|
<path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke-linecap="round" stroke-linejoin="round" />
|
|
<circle cx="12" cy="7" r="4" />
|
|
</svg>
|
|
Account Settings
|
|
</DropdownMenu.Item>
|
|
<DropdownMenu.Separator />
|
|
<DropdownMenu.Item onSelect={handleSignOut} variant="destructive">
|
|
<svg class="mr-2 h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
|
|
<path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4" stroke-linecap="round" stroke-linejoin="round" />
|
|
<polyline points="16,17 21,12 16,7" stroke-linecap="round" stroke-linejoin="round" />
|
|
<line x1="21" y1="12" x2="9" y2="12" stroke-linecap="round" stroke-linejoin="round" />
|
|
</svg>
|
|
Sign out
|
|
</DropdownMenu.Item>
|
|
</DropdownMenu.Content>
|
|
</DropdownMenu.Root>
|
|
</div>
|
|
</aside>
|