chore: init

web/src/lib/AppSidebar.svelte

@@ -0,0 +1,171 @@
+<script lang="ts">
+	import SearchForm from "./search-form.svelte";
+	import VersionSwitcher from "./switcher.svelte";
+	import * as Sidebar from "$lib/components/ui/sidebar/index.js";
+	import type { ComponentProps } from "svelte";
+	import { page } from "$app/state";
+	let { ref = $bindable(null), ...restProps }: ComponentProps<typeof Sidebar.Root> = $props();
+
+	type NavData = {
+		navMain: {
+			title: string;
+			url: string;
+			items: {
+				title: string;
+				url: string;
+				isActive?: boolean;
+			}[];
+		}[];
+	};
+
+	const isAdmin = $derived(page.url.pathname.startsWith("/admin"));
+	const regularData: NavData = $state({
+		navMain: [
+			// {
+			// 	title: "Empfang",
+			// 	url: "/entry",
+			// 	items: [
+			// 		{
+			// 			title: "Empfang",
+			// 			url: "/entry"
+			// 		},
+			// 	],
+			// },
+			{
+				title: "Räume",
+				url: "#",
+				items: [
+					{
+						title: "1",
+						url: "/room/1",
+					},
+					{
+						title: "2",
+						url: "/room/2",
+					},
+					{
+						title: "4",
+						url: "/room/4",
+					},
+					{
+						title: "5",
+						url: "/room/5",
+					},
+					{
+						title: "6",
+						url: "/room/6",
+					},
+					{
+						title: "7",
+						url: "/room/7",
+					},
+					{
+						title: "8",
+						url: "/room/8",
+					},
+					{
+						title: "Roe",
+						url: "/room/Roe",
+					},
+				],
+			},
+			// {
+			// 	title: "Tickets",
+			// 	url: "#",
+			// 	items: [
+			// 		{
+			// 			title: "001",
+			// 			url: "/ticket/001",
+			// 		},
+			// 		{
+			// 			title: "002",
+			// 			url: "/ticket/002",
+			// 		},
+			// 	],
+			// },
+			{
+				title: "Mehr",
+				url: "#",
+				items: [
+					{
+						title: "Display",
+						url: "/display",
+					},
+					{
+						title: "Logs",
+						url: "/log",
+					},
+					{
+						title: "Admin",
+						url: "/admin",
+					},
+				]
+			}
+		],
+	});
+	const adminData: NavData = {
+		navMain: [
+			{
+				title: "Admin",
+				url: "/admin",
+				items: [
+					{
+						title: "Räume",
+						url: "#",
+						isActive: true
+					}
+				]
+			},
+			{
+				title: "Mehr",
+				url: "#",
+				items: [
+					{
+						title: "Display",
+						url: "/display"
+					},
+					{
+						title: "Logs",
+						url: "/log",
+					},
+					{
+						title: "Admin",
+						url: "/",
+						isActive: true
+					},
+				]
+			}
+		]
+	};
+
+	const data = $derived(isAdmin ? adminData : regularData);
+</script>
+<Sidebar.Root {...restProps} bind:ref variant="floating">
+	<Sidebar.Header>
+		<!-- <VersionSwitcher versions={data.versions} defaultVersion={data.versions[0]} /> -->
+		<h2 style="text-align: center; font-weight: bold; font-size: 1.8em;">⏭️ NextUp</h2>
+		<SearchForm />
+	</Sidebar.Header>
+	<Sidebar.Content>
+		<!-- We create a Sidebar.Group for each parent. -->
+		{#each data.navMain as group (group.title)}
+			<Sidebar.Group style={group.title === "Mehr" ? "margin-top: auto;" : ""}>
+				<Sidebar.GroupLabel>{group.title}</Sidebar.GroupLabel>
+				<Sidebar.GroupContent>
+					<Sidebar.Menu>
+						{#each group.items as item (item.title)}
+							<Sidebar.MenuItem>
+								<Sidebar.MenuButton isActive={item.isActive == undefined ? page.url.pathname === item.url : item.isActive!}>
+									{#snippet child({ props })}
+										<a href={item.url} {...props}>{item.title}</a>
+									{/snippet}
+								</Sidebar.MenuButton>
+							</Sidebar.MenuItem>
+						{/each}
+					</Sidebar.Menu>
+				</Sidebar.GroupContent>
+			</Sidebar.Group>
+		{/each}
+	</Sidebar.Content>
+	<Sidebar.Rail />
+</Sidebar.Root>