PDF Designer

src/components/Dashboard/DashboardSidebar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { ripple } from "svelte-ripple-action";
 	import type { RippleOptions } from "svelte-ripple-action/dist/constants";
-	import { Home, Reader, EnvelopeClosed, Cube, Sun, Moon, Bell, Gear } from "radix-svelte-icons"
+	import { Home, Reader, EnvelopeClosed, Cube, Sun, Moon, Bell, Gear, LockClosed } from "radix-svelte-icons"
 	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
 	import DashboardNotification from "./DashboardNotification.svelte";
 	import { onMount } from "svelte";
@@ -13,7 +13,7 @@
 
 	const rippleOptions: RippleOptions = {
 		center: false,
-		color: "rgba(113, 128, 150, 0.1)",
+		color: lightTheme ? "rgba(233,233,233,0.1)" : "rgba(113, 128, 150, 0.1)",
 	};
 
 	onMount(() => {
@@ -66,10 +66,27 @@
 				</li>
 			</ul>
 		</details></li>
+		<li><details>
+			<summary class="button-tab w-full outline-0 hover:outline-0">
+				<LockClosed width={22} height={22} />
+			Admin</summary>
+			<ul>
+				<li>
+					<a use:ripple={rippleOptions} class="button-tab" href="/dashboard/admin/ausweise-pruefen">
+						Ausweise Prüfen
+					</a>
+				</li>
+				<li>
+					<a use:ripple={rippleOptions} class="button-tab" href="/dashboard/admin/pdf-designer">
+						PDF Erstellen
+					</a>
+				</li>
+			</ul>
+		</details></li>
 	</div>
 	<div class="mt-auto flex flex-col gap-4 px-8">
 		<div class="flex flex-row justify-between items-center">
-			<ThemeController {lightTheme}></ThemeController>
+			<ThemeController bind:lightTheme></ThemeController>
 			<div class="dropdown dropdown-top">
 				<div class="indicator">
 					{#if Object.keys($notifications).length > 0}