thomas/jobbi-bewerbung
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header/Navigation-Styling ueberarbeitet

Browse Source 
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
thomas
2026-07-14 00:34:49 +02:00
co-authored by Claude
parent 1aa902bdce
commit 4fd843318f
2 changed files with 90 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/partials/header.ejs
+27 -24
View File
@@ -24,30 +24,31 @@
var angemeldet = (typeof user !== 'undefined' && user);
var initiale = angemeldet ? String(user.username || '?').charAt(0).toUpperCase() : '?';
%>
<!-- The bar carries no surface of its own: it takes the page background, so it
reads as part of the page rather than as a lid on top of it. Held apart from
the content only by a hairline and, once scrolled, the faintest shadow.
Slightly translucent + blurred so content passing underneath stays quiet. -->
<header id="siteHeader"
class="sticky top-0 z-50 bg-[#0b1220] text-slate-300 border-b border-white/5 transition-shadow duration-300">
<!-- A single cool glow anchored at the brand, instead of the old full-width
left-to-right gradient sweep. Gives the bar depth without shouting. -->
<div class="pointer-events-none absolute inset-0 bg-[radial-gradient(900px_circle_at_0%_-40%,rgba(56,189,248,0.16),transparent_60%)]"></div>
<div class="relative container mx-auto px-4">
class="sticky top-0 z-50 border-b border-gray-200/80 bg-gray-50/85 backdrop-blur-md transition-shadow duration-300 dark:border-white/5 dark:bg-gray-900/85">
<div class="container mx-auto px-4">
<div class="flex h-16 items-center gap-3">
<!-- Brand -->
<a href="/" class="group flex shrink-0 items-center gap-2.5 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/70 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0b1220]">
<span class="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-sky-400 to-blue-600 shadow-lg shadow-blue-900/40 ring-1 ring-white/10">
<a href="/" class="nav-brand group flex shrink-0 items-center gap-2.5 rounded-lg">
<span class="grid h-9 w-9 place-items-center rounded-xl bg-gradient-to-br from-sky-400 to-blue-600 shadow-sm shadow-blue-600/20 ring-1 ring-black/5">
<svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
</svg>
</span>
<span class="truncate text-[15px] font-semibold tracking-tight text-white">
<span class="truncate text-[15px] font-semibold tracking-tight text-gray-900 dark:text-white">
Bewerbungs-Tracker
</span>
</a>
<!-- Primary navigation (desktop). Order follows the actual workflow:
finden -> bewerben -> antworten. -->
<nav class="ml-4 hidden items-center gap-1 lg:flex" aria-label="Hauptnavigation">
<!-- Primary navigation (desktop), right-aligned next to the account
cluster. Order follows the actual workflow: finden -> bewerben ->
antworten. -->
<nav class="ml-auto hidden items-center gap-1 lg:flex" aria-label="Hauptnavigation">
<a href="/" class="nav-item <%= istBewerbungen ? 'is-active' : '' %>">
<span>Bewerbungen</span>
@@ -114,8 +115,10 @@
</a>
</nav>
<!-- Right cluster: notifications + account -->
<div class="ml-auto flex items-center gap-1.5">
<!-- Right cluster: notifications + account. Below lg the nav is hidden,
so `ml-auto` keeps this pinned right; from lg the nav already claims
the free space and the cluster just follows it. -->
<div class="ml-auto flex items-center gap-1.5 lg:ml-3">
<!-- Notifications -->
<div class="relative">
@@ -143,8 +146,8 @@
<!-- Account -->
<div class="relative">
<button type="button" data-dd="ddUser" aria-expanded="false" aria-haspopup="true"
class="flex items-center gap-2 rounded-lg py-1.5 pl-1.5 pr-2 text-sm text-slate-300 transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-400/70 focus-visible:ring-offset-2 focus-visible:ring-offset-[#0b1220]">
<span class="grid h-7 w-7 place-items-center rounded-full bg-white/10 text-[11px] font-semibold text-white ring-1 ring-white/15">
class="nav-item !gap-2 !py-1.5 !pl-1.5 !pr-2">
<span class="grid h-7 w-7 place-items-center rounded-full bg-blue-600/10 text-[11px] font-semibold text-blue-700 ring-1 ring-blue-600/20 dark:bg-white/10 dark:text-white dark:ring-white/15">
<%= initiale %>
</span>
<span class="hidden max-w-[10rem] truncate font-medium md:inline"><%= user.username %></span>
@@ -205,7 +208,7 @@
<!-- Mobile navigation: the same structure, spelled out. The old header just
dropped the labels and left seven unlabelled icons. -->
<div id="mobileNav" class="hidden border-t border-white/5 bg-[#0b1220] lg:hidden">
<div id="mobileNav" class="hidden border-t border-gray-200/80 bg-gray-50 lg:hidden dark:border-white/5 dark:bg-gray-900">
<nav class="container mx-auto space-y-4 px-4 py-4" aria-label="Hauptnavigation (mobil)">
<div class="space-y-0.5">
<a href="/" class="m-item <%= istBewerbungen ? 'is-active' : '' %>">Bewerbungen</a>
@@ -230,15 +233,15 @@
<% if (angemeldet) { %>
<div class="space-y-0.5">
<p class="m-label">Konto</p>
<p class="px-3 pb-1 text-sm text-white">
<p class="px-3 pb-1 text-sm text-gray-900 dark:text-white">
<%= user.username %>
<span class="text-slate-500">· <%= user.is_admin ? 'Administrator' : 'Benutzer' %></span>
<span class="text-gray-500 dark:text-slate-500">· <%= user.is_admin ? 'Administrator' : 'Benutzer' %></span>
</p>
<a href="/einstellungen" class="m-item <%= istEinstellungen ? 'is-active' : '' %>">Einstellungen</a>
<% if (user.is_admin) { %>
<a href="/admin" class="m-item <%= istAdmin ? 'is-active' : '' %>">Benutzer verwalten</a>
<% } %>
<a href="/logout" class="m-item text-rose-300 hover:bg-rose-500/10 hover:text-rose-200">Abmelden</a>
<a href="/logout" class="m-item !text-rose-600 hover:!bg-rose-50 dark:!text-rose-300 dark:hover:!bg-rose-500/10">Abmelden</a>
</div>
<% } %>
</nav>
@@ -308,13 +311,13 @@
});
}
// Subtle lift once the page is scrolled — the bar reads as floating
// above the content rather than welded to it.
// The bar has no surface of its own, so once content starts sliding
// underneath it needs the faintest separation — a hairline shadow, not
// a drop shadow.
var head = document.getElementById('siteHeader');
function onScroll() {
if (!head) return;
head.classList.toggle('shadow-xl', window.scrollY > 4);
head.classList.toggle('shadow-black/30', window.scrollY > 4);
head.classList.toggle('is-scrolled', window.scrollY > 4);
}
window.addEventListener('scroll', onScroll, { passive: true });
onScroll();