online-energieausweis/src/components/Dashboard/DashboardSidebar.svelte

<script lang="ts">
	import { ripple } from "svelte-ripple-action";
	import type { RippleOptions } from "svelte-ripple-action/dist/constants.js";
	import { Home, Reader, EnvelopeClosed, Cube, Bell, Gear, LockClosed, HamburgerMenu, CaretDown } from "radix-svelte-icons"
	import NotificationProvider from "#components/NotificationProvider/NotificationProvider.svelte";
	import DashboardNotification from "./DashboardNotification.svelte";
	import { notifications } from "#components/NotificationProvider/shared.js";
	import ThemeController from "#components/ThemeController.svelte";
	import { BenutzerClient } from "#components/Ausweis/types.js";
	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-10 bg-base-200">
	<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-200 border-r border-r-base-300 flex-col py-4">
	<a href="/" class="px-8 hidden md:block"
		><img
			src="/images/header/logo-big.svg"
			class="w-24"
			alt="IBCornelsen - Logo"
		/></a
	>

	<div class="flex flex-col gap-2 mt-0 md:mt-12 px-0">
		<a use:ripple={rippleOptions} class="button-tab" href="/dashboard">
			<Reader width={22} height={22} />
			Objekte
		</a>
		<!-- <button use:ripple={rippleOptions} class="button-tab">
			<EnvelopeClosed width={22} height={22} />
			Kontakt
		</button>
		<li><details class="[&_.caret]:open:rotate-180">
			<summary class="button-tab w-full outline-0 hover:outline-0">
				<Cube width={22} height={22} />
			Services <CaretDown size={24} class="caret ml-auto transition-transform"></CaretDown></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 class="[&_.caret]:open:rotate-180">
			<summary class="button-tab w-full outline-0 hover:outline-0 cursor-pointer">
				<LockClosed width={22} height={22} />
			Admin <CaretDown size={24} class="caret ml-auto transition-transform"></CaretDown></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="hover:bg-gray-200 p-3 rounded-lg">
						<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="hover:bg-gray-200 p-3 rounded-lg"
			>
				<Gear size={24} />
			</a>
		</div>
	</div>
	<div class="divider px-8"></div>
	<a
		href="/dashboard/einstellungen"
		use:ripple={rippleOptions}
		class="hover:bg-gray-200 no-animation focus:shadow-none justify-start py-4 h-auto 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">
			<span class="text-base-content font-semibold text-left"
				>{benutzer.vorname} {benutzer.name}</span
			>
			<span class="text-base-content text-sm">{benutzer.email}</span>
		</div>
	</a>
</aside>

<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-gray-200 outline-0;
	}

	li {
		@apply list-none;
	}

	.button-tab {
		@apply flex flex-row gap-4 py-2.5 px-4 cursor-pointer items-center;
	}

	.button-tab:focus {
		@apply shadow-none;
	}

	summary.button-tab::after {
		@apply ml-auto;
	}
</style>