Changeset 337ec5a in Klonkt

Timestamp:

06/14/2026 03:42:44 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

a7e12de

Parents:

4c5169f

Message:

hub: minimal auth nav over the hero on the overview (login back)

The headerless landing had no login access. Now a slim nav over the hero:
logged out -> Login; logged in -> Admin (god/admin) · name · Logout.
No brand title or timeline/grid switcher. Text color adapts (white on
hero image, otherwise ink).

Co-Authored-By: Claude <noreply@…>

File:

• src/views/pages/hub-home.ejs (modified) (2 diffs)

src/views/pages/hub-home.ejs

@@ -1 @@
-<div class="hub">
+<div class="hub<%= hub.heroImage ? ' hub--img' : '' %>">
+
+  <%# ── Minimale nav (alleen auth) — over de hero, geen brand/switcher ── %>
+  <nav class="hub-nav">
+    <div class="hub-nav-inner container">
+      <% if (user) { %>
+        <% if (user.role === 'god' || user.role === 'admin') { %>
+          <a class="hub-nav-link" href="/admin">Beheer</a>
+        <% } %>
+        <a class="hub-nav-link" href="/account"><%= user.username %></a>
+        <a class="hub-nav-link" href="/auth/logout">Uitloggen</a>
+      <% } else { %>
+        <a class="hub-nav-link" href="/auth/login">Inloggen</a>
+      <% } %>
+    </div>
+  </nav>
 
   <%# ── HERO (label) — de pagina begint hier, geen header erboven ────── %>
@@ -61 +76 @@
 
 <style>
-.hub { width: 100%; }
+.hub { width: 100%; position: relative; }
+
+/* ── Minimale auth-nav (over de hero) ─────────────────────────────── */
+.hub-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: 1rem 0; }
+.hub-nav-inner { display: flex; justify-content: flex-end; align-items: center; gap: 1.4rem; }
+.hub-nav-link {
+  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.9rem; opacity: 0.85;
+}
+.hub-nav-link:hover { opacity: 1; color: var(--accent); }
+.hub--img .hub-nav-link { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
+.hub--img .hub-nav-link:hover { color: #fff; opacity: 1; }
 
 /* ── Hero ─────────────────────────────────────────────────────────── */