192 lines
6.2 KiB
Svelte
192 lines
6.2 KiB
Svelte
<script lang="ts">
|
|
import { ripple } from "svelte-ripple-action";
|
|
import type { RippleOptions } from "svelte-ripple-action/dist/constants";
|
|
import { Home, Reader, EnvelopeClosed, Cube, Bell, Gear, LockClosed, HamburgerMenu } from "radix-svelte-icons"
|
|
import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
|
|
import DashboardNotification from "./DashboardNotification.svelte";
|
|
import { notifications } from "#components/NotificationProvider/shared";
|
|
import ThemeController from "#components/ThemeController.svelte";
|
|
import { BenutzerClient } from "#components/Ausweis/types";
|
|
import Cross1 from "radix-svelte-icons/src/lib/icons/Cross1.svelte";
|
|
|
|
export let lightTheme: boolean;
|
|
export let benutzer: BenutzerClient;
|
|
|
|
const rippleOptions: RippleOptions = {
|
|
center: false,
|
|
color: lightTheme ? "rgba(233,233,233,0.1)" : "rgba(113, 128, 150, 0.1)",
|
|
};
|
|
|
|
let headerOpen = false;
|
|
</script>
|
|
|
|
<header class="fixed top-0 left-0 w-full h-16 flex items-center justify-between px-4 border-b z-20">
|
|
<button on:click={() => headerOpen = !headerOpen}>
|
|
{#if headerOpen}
|
|
<Cross1 size={28}></Cross1>
|
|
{:else}
|
|
<HamburgerMenu size={28}></HamburgerMenu>
|
|
{/if}
|
|
</button>
|
|
<a href="/" class="block md:hidden"
|
|
><img
|
|
src="/images/header/logo-big.svg"
|
|
class="w-24"
|
|
alt="IBCornelsen - Logo"
|
|
/></a
|
|
>
|
|
</header>
|
|
|
|
<aside class:hidden={!headerOpen} class="fixed left-0 top-16 w-full h-[calc(100%-4rem)] flex z-30 md:relative md:h-auto md:w-auto md:top-0 md:flex bg-base-100 border-r border-r-base-300 flex-col py-8">
|
|
<a href="/" class="px-8 hidden md:block"
|
|
><img
|
|
src="/images/header/logo-big.svg"
|
|
class="w-36"
|
|
alt="IBCornelsen - Logo"
|
|
/></a
|
|
>
|
|
|
|
<div class="menu flex flex-col gap-2 mt-0 md:mt-12 px-0">
|
|
<a use:ripple={rippleOptions} class="button-tab" href="/dashboard">
|
|
<Home width={22} height={22} />
|
|
Home
|
|
</a>
|
|
<a use:ripple={rippleOptions} class="button-tab" href="/dashboard/ausweise">
|
|
<Reader width={22} height={22} />
|
|
Ausweise
|
|
</a>
|
|
<button use:ripple={rippleOptions} class="button-tab">
|
|
<EnvelopeClosed width={22} height={22} />
|
|
Kontakt
|
|
</button>
|
|
<li><details>
|
|
<summary class="button-tab w-full outline-0 hover:outline-0">
|
|
<Cube width={22} height={22} />
|
|
Services</summary>
|
|
<ul>
|
|
<li>
|
|
<button use:ripple={rippleOptions} class="button-tab">
|
|
Kontakt
|
|
</button>
|
|
</li>
|
|
<li>
|
|
<button use:ripple={rippleOptions} class="button-tab">
|
|
Kontakt
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</details></li>
|
|
{#if benutzer.rolle === "ADMIN"}
|
|
<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 Designer
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a use:ripple={rippleOptions} class="button-tab" href="/dashboard/admin/pdf-viewer">
|
|
PDF Viewer
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</details></li>
|
|
{/if}
|
|
</div>
|
|
<div class="mt-auto flex flex-col gap-4 px-8">
|
|
<div class="flex flex-row justify-between items-center">
|
|
<ThemeController bind:lightTheme></ThemeController>
|
|
<div class="dropdown dropdown-top">
|
|
<div class="indicator">
|
|
{#if Object.keys($notifications).length > 0}
|
|
<span class="indicator-item badge badge-accent text-xs">{Object.keys($notifications).length}</span>
|
|
{/if}
|
|
<button tabindex="0" class="btn btn-square btn-ghost hover:bg-base-200">
|
|
<Bell size={24} />
|
|
</button>
|
|
</div>
|
|
<ul tabindex="0" class="dropdown-content mb-2 border border-base-300 z-10 menu py-4 px-0 bg-base-200 rounded-box w-80">
|
|
<NotificationProvider component={DashboardNotification} />
|
|
</ul>
|
|
</div>
|
|
|
|
<a href="/dashboard/einstellungen"
|
|
class="btn btn-square btn-ghost hover:bg-base-200"
|
|
>
|
|
<Gear size={24} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="divider px-8"></div>
|
|
<a
|
|
href="/dashboard/einstellungen"
|
|
use:ripple={rippleOptions}
|
|
class="btn btn-ghost no-animation focus:shadow-none justify-start py-4 h-auto hover:bg-base-200 px-8 rounded-none w-full flex flex-row gap-4"
|
|
>
|
|
<div class="avatar">
|
|
<div class="w-12 rounded-full">
|
|
<img
|
|
src={benutzer.profilbild || "/images/profile-placeholder.png"}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-2">
|
|
<span class="text-base-content font-semibold text-left"
|
|
>{benutzer.vorname} {benutzer.name}</span
|
|
>
|
|
<span class="text-base-content">{benutzer.email}</span>
|
|
</div>
|
|
</a>
|
|
</aside>
|
|
|
|
<!--<header class="md:hidden flex flex-row justify-between items-center px-8 sticky top-0 z-50 h-20 bg-base-100 border-b border-b-base-300">
|
|
<a href="/"
|
|
><img
|
|
src="/images/header/logo-big.png"
|
|
class="w-36"
|
|
alt="IBCornelsen - Logo"
|
|
/></a
|
|
>
|
|
<div class="dropdown dropdown-end">
|
|
<button tabindex="0" role="button">
|
|
<svg width="25" height="25" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4.5C2 4.22386 2.22386 4 2.5 4H12.5C12.7761 4 13 4.22386 13 4.5C13 4.77614 12.7761 5 12.5 5H2.5C2.22386 5 2 4.77614 2 4.5ZM7 7.5C7 7.22386 7.22386 7 7.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H7.5C7.22386 8 7 7.77614 7 7.5ZM4 10.5C4 10.2239 4.22386 10 4.5 10H12.5C12.7761 10 13 10.2239 13 10.5C13 10.7761 12.7761 11 12.5 11H4.5C4.22386 11 4 10.7761 4 10.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg>
|
|
</button>
|
|
<ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
|
|
<li><a class="text-base-content">Item 1</a></li>
|
|
<li><a class="text-base-content">Item 2</a></li>
|
|
</ul>
|
|
</div>
|
|
</header>-->
|
|
|
|
<style>
|
|
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap");
|
|
|
|
:global(*) {
|
|
font-family: Poppins !important;
|
|
}
|
|
|
|
.button-tab {
|
|
@apply btn btn-primary btn-ghost rounded-none px-8 justify-start outline-0 gap-4 items-center text-base font-normal text-base-content no-animation;
|
|
}
|
|
|
|
.button-tab:hover {
|
|
@apply bg-base-200 outline-0;
|
|
}
|
|
|
|
.button-tab:focus {
|
|
@apply shadow-none;
|
|
}
|
|
|
|
summary.button-tab::after {
|
|
@apply ml-auto;
|
|
}
|
|
</style>
|