source: Klonkt/src/views/partials/topnav.ejs@ 7bc636b

<%
// Top nav — RESPONSIVE.
//
// Mobile (<768px):
//   - Brand centered, small theme-toggle right.
//   - All other actions live in the bottom-tab nav.
//   - Sticky top, blur background, safe-area-top respected.
//
// Desktop (≥768px):
//   - Full v9 masthead: brand left, action row right
//     (Archief / Search / Install / Theme / Prutter / User-menu).
//   - bottom-tab is hidden via CSS, so all nav must live here.

const _siteUrlBase = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
const _isAdmin     = typeof bodyClass !== 'undefined' && bodyClass.indexOf('on-admin') >= 0;
const _hasSearch   = !site || site.show_search === undefined || site.show_search;
const _hasPrutter  = user && site && site.enable_prutter;
const _canPost     = user && permissions && permissions.canCreatePost && permissions.canCreatePost(user, site);
%>

<header class="masthead">
  <div class="container masthead-inner">

    <!-- Brand block (always visible) -->
    <div class="masthead-brand">
      <% if (_isAdmin) { %>
        <a href="<%= _siteUrlBase %>/" class="nav-link nav-link-admin">← Terug naar site</a>
      <% } else if (site) { %>
        <a class="site-title" href="<%= _siteUrlBase %>/"
           hx-get="<%= _siteUrlBase %>/?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
           hx-push-url="<%= _siteUrlBase %>/" hx-indicator="#pcms-loading"><%= site.title %></a>
      <% } else { %>
        <a class="site-title" href="/">PrutFolio</a>
      <% } %>
    </div>

    <!-- Mobile: theme toggle ONLY for logged-out users.
         Logged-in users get the toggle inside the profile sheet
         (bottom-tab → Profiel → Thema). All other actions in bottom-tab. -->
    <% if (!user) { %>
    <div class="top-nav-mobile">
      <button type="button" class="nav-btn" id="theme-toggle-mobile" aria-label="Thema wisselen" title="Thema wisselen">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
      </button>
    </div>
    <% } %>

    <!-- Desktop-only: full action row -->
    <nav class="top-nav top-nav-desktop" aria-label="Hoofdnavigatie">

      <% if (!_isAdmin) { %>
        <a class="nav-link" href="<%= _siteUrlBase %>/archive"
           hx-get="<%= _siteUrlBase %>/archive?partial=1" hx-target="#pcms-main"
           hx-swap="innerHTML" hx-push-url="<%= _siteUrlBase %>/archive"
           hx-indicator="#pcms-loading">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 8v13H3V8"/><rect x="1" y="3" width="22" height="5" rx="1"/><line x1="10" y1="12" x2="14" y2="12"/></svg>
          <span class="nav-label">Archief</span>
        </a>
      <% } %>

      <% if (_hasSearch) { %>
        <button type="button" class="nav-btn" id="search-toggle" aria-label="Zoeken" title="Zoeken">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </button>
      <% } %>

      <button type="button" class="nav-btn" id="pwa-install-btn" hidden aria-label="App installeren" title="App installeren">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
      </button>

      <button type="button" class="nav-btn" id="theme-toggle" aria-label="Thema wisselen" title="Thema wisselen">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></svg>
      </button>

      <% if (_hasPrutter) { %>
        <a class="nav-btn" href="<%= _siteUrlBase %>/prutter" aria-label="Prutter (DMs)" title="Prutter">
          <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
        </a>
      <% } %>

      <% if (user) { %>
        <details class="user-menu">
          <summary class="nav-btn user-toggle" aria-label="Gebruikersmenu">
            <% if (user.avatar_url) { %>
              <img class="user-avatar user-avatar-img" src="<%= user.avatar_url %>" alt="">
            <% } else { %>
              <span class="user-avatar"><%= user.username.charAt(0).toUpperCase() %></span>
            <% } %>
          </summary>
          <div class="user-dropdown" role="menu">
            <div class="user-dropdown-header">
              <% if (user.avatar_url) { %>
                <img class="udh-avatar" src="<%= user.avatar_url %>" alt="">
              <% } else { %>
                <span class="udh-avatar udh-avatar-fallback"><%= user.username.charAt(0).toUpperCase() %></span>
              <% } %>
              <div class="udh-meta">
                <span class="udh-name"><%= user.username %></span>
                <% if (user.role === 'god') { %>
                  <span class="udh-role">Admin</span>
                <% } else if (user.role === 'admin' || user.role === 'moderator') { %>
                  <span class="udh-role"><%= user.role.charAt(0).toUpperCase() + user.role.slice(1) %></span>
                <% } %>
              </div>
            </div>
            <div class="user-dropdown-list">
              <a href="/account" role="menuitem" class="udi">
                <svg class="udi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                <span>Account</span>
              </a>
              <% if (user.role === 'god' || user.role === 'admin') { %>
                <a href="/admin" role="menuitem" class="udi">
                  <svg class="udi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3h7v7H3z"/><path d="M14 3h7v7h-7z"/><path d="M14 14h7v7h-7z"/><path d="M3 14h7v7H3z"/></svg>
                  <span>Beheer</span>
                </a>
              <% } %>
              <% if (_canPost) { %>
                <a href="/posts/new" role="menuitem" class="udi"
                   hx-get="/posts/new?partial=1" hx-target="#pcms-main" hx-swap="innerHTML"
                   hx-push-url="/posts/new" hx-indicator="#pcms-loading">
                  <svg class="udi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></svg>
                  <span>Nieuwe post</span>
                </a>
              <% } %>
            </div>
            <div class="user-dropdown-divider" aria-hidden="true"></div>
            <div class="user-dropdown-list">
              <a href="/auth/logout" role="menuitem" class="udi udi-danger">
                <svg class="udi-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
                <span>Uitloggen</span>
              </a>
            </div>
          </div>
        </details>
      <% } else { %>
        <a class="nav-link" href="/auth/login">
          <span class="nav-label">Inloggen</span>
        </a>
      <% } %>

    </nav>
  </div>
</header>

<!-- Search overlay (shared by mobile bottom-tab + desktop top-nav) -->
<div id="search-overlay" class="search-overlay" hidden>
  <div class="container">
    <form class="search-overlay-form" method="get" action="<%= _siteUrlBase %>/search">
      <input type="search" name="q" placeholder="Zoeken in posts…" autocomplete="off">
      <button type="submit" class="nav-btn" aria-label="Zoeken">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
      </button>
      <button type="button" class="nav-btn" id="search-close" aria-label="Sluiten">
        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </button>
    </form>
  </div>
</div>

<script>
(function() {
  // Theme toggle (works for both mobile + desktop buttons)
  function toggleTheme() {
    const cur = document.documentElement.getAttribute('data-theme') || 'dark';
    const next = cur === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', next);
    try { localStorage.setItem('pcms-theme', next); } catch (e) {}
  }
  // Theme toggle — event delegation so it works for ANY button with the
  // matching ids, even ones rendered later in the page (footer is below
  // topnav in source order, so getElementById would have returned null
  // when this IIFE ran).
  document.body.addEventListener('click', function(e) {
    const btn = e.target.closest(
      '#theme-toggle, #theme-toggle-mobile, #theme-toggle-footer'
    );
    if (btn) toggleTheme();
  });

  // Search overlay
  const overlay = document.getElementById('search-overlay');
  document.getElementById('search-toggle')?.addEventListener('click', function() {
    if (overlay) {
      overlay.hidden = false;
      const inp = overlay.querySelector('input');
      if (inp) inp.focus();
    }
  });
  document.getElementById('search-close')?.addEventListener('click', function() {
    if (overlay) overlay.hidden = true;
  });
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && overlay && !overlay.hidden) overlay.hidden = true;
  });

  // Close user dropdown on outside click
  document.addEventListener('click', function(e) {
    const open = document.querySelector('.user-menu[open]');
    if (open && !open.contains(e.target)) open.removeAttribute('open');
  });
})();
</script>

<style>
/* ============================================================
   TOP-NAV — responsive
   Mobile: brand centered, small theme btn right, NOTHING else.
   Desktop (≥768px): full v9 layout — brand left, action row right.
   ============================================================ */

.masthead-inner {
  /* Override v9's flex-end → space-between so brand is on the left */
  justify-content: space-between !important;
  gap: 1rem;
}
.masthead-brand .site-title,
.masthead-brand .nav-link-admin {
  display: inline-block;
  vertical-align: middle;
}

/* Site title is suppressed everywhere — the profile-header carries the brand
   on content pages, and admin pages have their own "← Terug naar site" link
   (a different selector, .nav-link-admin, which stays visible). The masthead
   becomes a thin utility strip with just theme-toggle / search / etc. */
.masthead-brand .site-title {
  display: none;
}

/* On mobile, hide the entire masthead except for admin pages. The brand
   appears in the profile-header on content pages, and the bottom-tab
   provides all navigation. Admin keeps it because the "← Terug naar site"
   link is the only way back to the public site from /admin/*. */
@media (max-width: 767px) {
  body:not(.on-admin) .masthead { display: none; }
}

/* On mobile, center the brand in the masthead */
@media (max-width: 767px) {
  .masthead-inner {
    justify-content: center !important;
    position: relative;
  }
  .masthead-brand {
    text-align: center;
  }
  /* Lone theme button for logged-out users — minimal, icon-only,
     no border/background to avoid the iOS sticky-hover look. */
  .top-nav-mobile {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .top-nav-mobile .nav-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent !important;
    border-color: transparent !important;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .top-nav-mobile .nav-btn:active {
    transform: scale(0.92);
    color: var(--ink);
  }
  /* Suppress sticky hover on touch — only show feedback for real hover devices */
  @media (hover: none) {
    .top-nav-mobile .nav-btn:hover {
      background: transparent !important;
      border-color: transparent !important;
      color: var(--ink-soft);
    }
  }
  .top-nav-desktop {
    display: none !important;
  }
}

/* On desktop, hide the mobile-only theme button */
@media (min-width: 768px) {
  .top-nav-mobile { display: none; }
}

/* ── Admin "back" link styling (inherited from v9 patterns) ── */
.nav-link-admin {
  background: var(--accent);
  color: #fff !important;
  padding: .5rem .85rem;
  border-radius: 6px;
  text-decoration: none;
  font-family: var(--font-ui);
  font-size: .875rem;
  font-weight: 500;
}
.nav-link-admin:hover { opacity: .9; color: #fff !important; }

/* ── Tap-target enforcement for all nav buttons on touch ── */
@media (hover: none) {
  .nav-btn, .nav-link {
    min-height: 44px;
    min-width: 44px;
  }
  .nav-btn:active {
    transform: scale(0.95);
    background: var(--paper-2);
  }
}

/* ── User dropdown (desktop only — mobile uses bottom-tab → /account) ── */
.user-menu { position: relative; list-style: none; }
.user-menu > summary {
  list-style: none; cursor: pointer;
  padding: .25rem; border-radius: 6px;
  display: inline-flex; align-items: center;
  border: 1px solid transparent;
  transition: all var(--transition);
}
.user-menu > summary::-webkit-details-marker { display: none; }
.user-menu > summary::marker { content: ''; }
.user-menu > summary:hover { background: var(--paper-2); border-color: var(--rule); }
.user-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--paper-2);   /* neutral so transparent avatars blend */
  color: var(--accent);          /* fallback initial color */
  font-family: var(--font-ui); font-weight: 600; font-size: .8rem;
  pointer-events: none;
  overflow: hidden;
}
.user-avatar-img {
  /* When the pill renders as <img> instead of <span>, fill it edge-to-edge. */
  object-fit: cover;
}
.user-dropdown {
  position: absolute; top: calc(100% + .55rem); right: 0;
  min-width: 220px;
  padding: .35rem;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border: 1px solid var(--rule);
  border-radius: 12px;
  box-shadow:
    0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent),
    0 8px 24px color-mix(in srgb, var(--ink) 14%, transparent),
    0 16px 48px color-mix(in srgb, var(--ink) 10%, transparent);
  z-index: 200;
  font-family: var(--font-ui);
  transform-origin: top right;
}
/* Open animation — only fires when <details open> matches, so closing the
   dropdown doesn't replay the entry animation. */
.user-menu[open] > .user-dropdown {
  animation: ud-fade-in .14s cubic-bezier(.2, .8, .25, 1);
}
@keyframes ud-fade-in {
  from { opacity: 0; transform: translateY(-6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Identity header — small avatar + username/role badge */
.user-dropdown-header {
  display: flex; align-items: center; gap: .65rem;
  padding: .55rem .65rem .65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 65%, transparent);
  margin-bottom: .35rem;
}
.udh-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover;
  background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.udh-avatar-fallback {
  color: var(--accent); font-weight: 700; font-size: .95rem;
}
.udh-meta { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.udh-name {
  font-weight: 600; font-size: .92rem; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 140px;
}
.udh-role {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); opacity: .85; margin-top: .12rem;
}

/* Item list group */
.user-dropdown-list { display: flex; flex-direction: column; gap: 1px; }
.user-dropdown-divider {
  height: 1px;
  margin: .35rem .25rem;
  background: color-mix(in srgb, var(--rule) 60%, transparent);
}

/* Items — icon + label, rounded inner highlight on hover (macOS feel) */
.user-dropdown .udi {
  display: flex; align-items: center; gap: .65rem;
  padding: .5rem .65rem;
  color: var(--ink); text-decoration: none;
  font-size: .88rem; font-weight: 500;
  border-radius: 7px;
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
.user-dropdown .udi:hover,
.user-dropdown .udi:focus-visible {
  background: color-mix(in srgb, var(--accent) 10%, var(--paper-2));
  color: var(--accent);
  outline: none;
}
.user-dropdown .udi:active { transform: scale(.98); }
.user-dropdown .udi-icon {
  width: 16px; height: 16px;
  opacity: .7;
  flex-shrink: 0;
  transition: opacity var(--transition);
}
.user-dropdown .udi:hover .udi-icon,
.user-dropdown .udi:focus-visible .udi-icon { opacity: 1; }

/* Logout: subtle danger tint on hover, never on rest. Uses a fixed red so
   it always reads as a destructive action even if the user's accent is red. */
.user-dropdown .udi-danger:hover,
.user-dropdown .udi-danger:focus-visible {
  background: color-mix(in srgb, #dc2626 14%, var(--paper-2));
  color: #dc2626;
}

/* ── Search overlay ── */
.search-overlay {
  position: fixed; top: 0; left: 0; right: 0;
  background: color-mix(in srgb, var(--paper) 96%, transparent);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--rule);
  padding: 1rem 0; z-index: 200;
  padding-top: calc(1rem + env(safe-area-inset-top, 0));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 8%, transparent);
}
.search-overlay-form { display: flex; gap: .5rem; align-items: center; }
.search-overlay-form input {
  flex: 1; padding: .85rem 1rem;
  min-height: 44px;
  border: 1px solid var(--rule); border-radius: 8px;
  font-family: var(--font-ui); font-size: 1rem;
  background: var(--paper); color: var(--ink);
}
.search-overlay-form input:focus {
  outline: 2px solid var(--accent); outline-offset: 0;
}
.search-overlay-form .nav-btn {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
</style>