diff --git a/app/src/lib/assets/icons/dashboard.svg b/app/src/lib/assets/icons/dashboard.svg
new file mode 100644
index 0000000..c9cf470
--- /dev/null
+++ b/app/src/lib/assets/icons/dashboard.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/src/lib/assets/icons/logout.svg b/app/src/lib/assets/icons/logout.svg
new file mode 100644
index 0000000..7bf5110
--- /dev/null
+++ b/app/src/lib/assets/icons/logout.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/src/lib/assets/icons/logs.svg b/app/src/lib/assets/icons/logs.svg
new file mode 100644
index 0000000..9abf1d0
--- /dev/null
+++ b/app/src/lib/assets/icons/logs.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/src/lib/assets/icons/printer.svg b/app/src/lib/assets/icons/printer.svg
new file mode 100644
index 0000000..7befdfd
--- /dev/null
+++ b/app/src/lib/assets/icons/printer.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/src/lib/assets/icons/protokoll.svg b/app/src/lib/assets/icons/protokoll.svg
new file mode 100644
index 0000000..cbaca75
--- /dev/null
+++ b/app/src/lib/assets/icons/protokoll.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/src/lib/assets/icons/stations.svg b/app/src/lib/assets/icons/stations.svg
new file mode 100644
index 0000000..249f544
--- /dev/null
+++ b/app/src/lib/assets/icons/stations.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/src/routes/admin/+layout.svelte b/app/src/routes/admin/+layout.svelte
index a7013b9..6430bed 100644
--- a/app/src/routes/admin/+layout.svelte
+++ b/app/src/routes/admin/+layout.svelte
@@ -3,6 +3,11 @@
import { goto } from '$app/navigation';
import { pb } from '$lib/pb';
import logo from '$lib/assets/checkflo-logo.png';
+ import iconDashboard from '$lib/assets/icons/dashboard.svg';
+ import iconLogs from '$lib/assets/icons/logs.svg';
+ import iconProtokoll from '$lib/assets/icons/protokoll.svg';
+ import iconStations from '$lib/assets/icons/stations.svg';
+ import iconLogout from '$lib/assets/icons/logout.svg';
let { children } = $props();
@@ -14,10 +19,10 @@
}
const navItems = [
- { href: '/admin/dashboard', label: 'Dashboard', icon: '◈' },
- { href: '/admin/logs', label: 'Einträge', icon: '≡' },
- { href: '/admin/protokoll', label: 'Protokoll', icon: '📄' },
- { href: '/admin/stations', label: 'Stationen', icon: '⊞' }
+ { href: '/admin/dashboard', label: 'Dashboard', icon: iconDashboard },
+ { href: '/admin/logs', label: 'Einträge', icon: iconLogs },
+ { href: '/admin/protokoll', label: 'Protokoll', icon: iconProtokoll },
+ { href: '/admin/stations', label: 'Stationen', icon: iconStations }
];
@@ -36,12 +41,15 @@
class="nav-item"
class:active={$page.url.pathname.startsWith(item.href)}
>
- {item.icon}
+ 
{item.label}
{/each}
-
+
@@ -85,20 +93,39 @@
}
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active { background: rgba(249,115,22,0.15); color: #F97316; }
- .nav-icon { font-size: 1.1rem; }
+
+ .nav-icon {
+ width: 18px;
+ height: 18px;
+ flex-shrink: 0;
+ filter: brightness(0) saturate(100%) invert(55%) sepia(14%) saturate(400%) hue-rotate(182deg);
+ }
+ .nav-item.active .nav-icon {
+ filter: brightness(0) saturate(100%) invert(56%) sepia(85%) saturate(600%) hue-rotate(359deg);
+ }
+ .nav-item:hover .nav-icon {
+ filter: brightness(0) invert(1);
+ }
.logout {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
background: none;
border: 1px solid #2a3347;
color: #8892a4;
- padding: 0.6rem;
+ padding: 0.6rem 0.75rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.15s;
margin-top: 1rem;
+ width: 100%;
}
.logout:hover { border-color: #F97316; color: #F97316; }
+ .logout:hover .nav-icon {
+ filter: brightness(0) saturate(100%) invert(56%) sepia(85%) saturate(600%) hue-rotate(359deg);
+ }
main {
flex: 1;
@@ -116,8 +143,9 @@
}
.logo-link { margin-bottom: 0; margin-right: auto; }
nav { flex-direction: row; flex: 0; gap: 0.5rem; }
- .nav-item span:last-child { display: none; }
- .logout { margin-top: 0; padding: 0.5rem 0.75rem; }
+ .nav-item span { display: none; }
+ .logout { margin-top: 0; padding: 0.5rem 0.75rem; width: auto; }
+ .logout :global(span) { display: none; }
main { padding: 1rem; }
}