171 lines
3.3 KiB
Svelte
171 lines
3.3 KiB
Svelte
<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> |