rene/checkflo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feature: Phosphor-Icons in Admin-Nav, Druck-Button mit Printer-Icon

Browse source
This commit is contained in:
rene 2026-05-17 14:39:47 +02:00
parent c5a640911c
commit c983750dcd
7 changed files with 44 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

48
app/src/routes/admin/+layout.svelte
View file

@ -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 }
];
</script>
@ -36,12 +41,15 @@
class="nav-item"
class:active={$page.url.pathname.startsWith(item.href)}
>
<span class="nav-icon">{item.icon}</span>
<img src={item.icon} alt="" class="nav-icon" />
<span>{item.label}</span>
</a>
{/each}
</nav>
<button class="logout" onclick={logout}>Abmelden</button>
<button class="logout" onclick={logout}>
<img src={iconLogout} alt="" class="nav-icon" />
Abmelden
</button>
</aside>
<main>
@ -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; }
}
</style>