Build user pages

This commit is contained in:
NeilClack
2026-02-25 13:19:26 -06:00
parent 12190d01dc
commit cc51f40591
53 changed files with 5204 additions and 4817 deletions
+37 -19
View File
@@ -1,48 +1,66 @@
<!-- This layout is used for all pages where a user must be authenticated to visit.
Below the navigation bar, there should be two sections. A sidebar, containing links
to common "pages", and a window to the right of that sidebar, with it's contents expanded
to fill the entire area, to display the current "page".
This layout also acts as a sort of 'gatekeeper' in that it is also the authorization layer.
-->
<script lang="ts">
import { page } from '$app/state';
import { canAccessAdmin } from '$lib/svelte-admin/roles';
import { getAllModelConfigs } from '$lib/svelte-admin/registry';
import type { LayoutData } from './$types';
let { children, data } = $props<{ children: any; data: LayoutData }>();
let adminExpanded = $state(true);
const isAdmin = $derived(canAccessAdmin(data.userRoleId));
const adminModels = getAllModelConfigs();
const navLinks = [
{ href: '/dashboard', label: 'Dashboard' },
{ href: '/account', label: 'Account' },
{ href: '/proclamations', label: 'Proclamations' },
{ href: '/license-keys', label: 'License Keys' }
];
function isActive(href: string): boolean {
return page.url.pathname === href || page.url.pathname.startsWith(href + '/');
}
</script>
<!-- Main Area -->
<div class="flex min-h-0 flex-1">
<!-- Sidebar -->
<div class="mt-12 mr-12 flex flex-col gap-1">
<!-- Sidebar links -->
<a href="/dashboard" class="text-blue-600">Dashboard</a>
<nav class="mt-12 mr-12 flex flex-col gap-1">
{#each navLinks as link}
<a
href={link.href}
class="rounded px-3 py-1.5 text-sm font-medium transition-colors {isActive(link.href)
? 'bg-blue-50 text-blue-700'
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}"
>
{link.label}
</a>
{/each}
{#if isAdmin}
<div class="mt-2 flex flex-col">
<div class="mt-4 flex flex-col gap-1">
<a
href="/admin"
class="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900"
class="rounded px-3 py-1.5 text-sm font-medium transition-colors {isActive('/admin')
? 'bg-blue-50 text-blue-700'
: 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'}"
>
Admin Panel
</a>
<div class="ml-5 flex flex-col">
<div class="ml-3 flex flex-col gap-0.5">
{#each adminModels as model}
<a href="/admin/{model.slug}" class="text-sm text-blue-600 hover:text-blue-800">
<a
href="/admin/{model.slug}"
class="rounded px-3 py-1 text-sm transition-colors {isActive(
'/admin/' + model.slug
)
? 'bg-blue-50 text-blue-700'
: 'text-blue-600 hover:bg-gray-50 hover:text-blue-800'}"
>
{model.displayName}
</a>
{/each}
</div>
</div>
{/if}
<!-- End Sidebar links -->
</div>
<!-- End Sidebar -->
</nav>
<!-- Page content -->
<div class="min-h-0 flex-1 overflow-auto">
{@render children()}