IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Dashboard, Datenblatt usw.

Browse Source
This commit is contained in:
Moritz Utcke
2025-02-19 18:12:48 +11:00
parent 198912c792
commit 69566f1c74
39 changed files with 1479 additions and 420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/Dashboard/DashboardSidebar.svelte
View File

@@ -1,7 +1,7 @@
<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 } from "radix-svelte-icons"
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";
@@ -20,7 +20,7 @@
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">
<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>
@@ -37,11 +37,11 @@
>
</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">
<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-36"
class="w-24"
alt="IBCornelsen - Logo"
/></a
>
@@ -59,10 +59,10 @@
<EnvelopeClosed width={22} height={22} />
Kontakt
</button>
<li><details>
<li><details class="[&_.caret]:open:rotate-180">
<summary class="button-tab w-full outline-0 hover:outline-0">
<Cube width={22} height={22} />
Services</summary>
Services <CaretDown size={24} class="caret ml-auto transition-transform"></CaretDown></summary>
<ul>
<li>
<button use:ripple={rippleOptions} class="button-tab">
@@ -77,10 +77,10 @@
</ul>
</details></li>
{#if benutzer.rolle === "ADMIN"}
<li><details>
<summary class="button-tab w-full outline-0 hover:outline-0">
<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</summary>
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">
@@ -109,7 +109,7 @@
{#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="button btn-square btn-ghost hover:bg-base-200">
<button tabindex="0" class="hover:bg-gray-200 p-3 rounded-lg">
<Bell size={24} />
</button>
</div>
@@ -119,7 +119,7 @@
</div>
<a href="/dashboard/einstellungen"
class="button btn-square btn-ghost hover:bg-base-200"
class="hover:bg-gray-200 p-3 rounded-lg"
>
<Gear size={24} />
</a>
@@ -129,7 +129,7 @@
<a
href="/dashboard/einstellungen"
use:ripple={rippleOptions}
class="button 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"
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">
@@ -138,34 +138,15 @@
/>
</div>
</div>
<div class="flex flex-col gap-2">
<div class="flex flex-col">
<span class="text-base-content font-semibold text-left"
>{benutzer.vorname} {benutzer.name}</span
>
<span class="text-base-content">{benutzer.email}</span>
<span class="text-base-content text-sm">{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");
@@ -178,7 +159,15 @@
} */
.button-tab:hover {
@apply bg-base-200 outline-0;
@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 {