Build user pages
This commit is contained in:
@@ -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()}
|
||||
|
||||
Reference in New Issue
Block a user