Build Admin pages

src/routes/(protected)/+layout.svelte

@@ -1,13 +1,20 @@
-<!-- This layout is used for all pages where a user must be authenticated to visit. 
+<!-- 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". 
+ 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">
-	const { children } = $props();
+	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();
 </script>
 
 <!-- Main Area -->
@@ -16,11 +23,11 @@
 	<div class="mt-12 mr-12 flex flex-col gap-1">
 		<!-- Sidebar links -->
 		<a href="/dashboard" class="text-blue-600">Dashboard</a>
-		
+
 		<div class="flex flex-col">
 			<button
 				class="flex items-center gap-1 text-left text-gray-700 hover:text-gray-900"
-				onclick={() => adminExpanded = !adminExpanded}
+				onclick={() => (adminExpanded = !adminExpanded)}
 			>
 				<span class="w-4 text-xs">{adminExpanded ? '▼' : '▶'}</span>
 				Admin
@@ -28,10 +35,28 @@
 			{#if adminExpanded}
 				<div class="ml-5 flex flex-col">
 					<a href="/affirmations" class="text-blue-600">Affirmations</a>
-					<a href="/frequencies"  class="text-blue-600">Solfeggio Frequencies</a>
+					<a href="/frequencies" class="text-blue-600">Solfeggio Frequencies</a>
 				</div>
 			{/if}
 		</div>
+
+		{#if isAdmin}
+			<div class="mt-2 flex flex-col">
+				<a
+					href="/admin"
+					class="flex items-center gap-1 text-sm font-medium text-gray-700 hover:text-gray-900"
+				>
+					Admin Panel
+				</a>
+				<div class="ml-5 flex flex-col">
+					{#each adminModels as model}
+						<a href="/admin/{model.slug}" class="text-sm text-blue-600 hover:text-blue-800">
+							{model.displayName}
+						</a>
+					{/each}
+				</div>
+			</div>
+		{/if}
 		<!-- End Sidebar links -->
 	</div>
 	<!-- End Sidebar -->
@@ -39,4 +64,4 @@
 	<div class="min-h-0 flex-1 overflow-auto">
 		{@render children()}
 	</div>
-</div>
+</div>