Changeset 83b8b8f in Klonkt

Timestamp:

06/20/2026 02:04:32 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

999aad2

Parents:

2149f5a

Message:

feat(i18n): styled language dropdown in the header (instead of native select)

Custom dropdown (details/summary, like the user menu): toggle = globe + code +
chevron; menu = full names with code, accent on the active language, clean
shadow/border. Closes on outside click (handler extended). style.css?v=28.

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

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/partials/topnav.ejs (modified) (2 diffs)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -1504 +1504 @@
 }
 
-/* Taal-keuze in de header-nav (NL/EN/DE). Past bij de pill-knoppen ernaast. */
-.nav-lang {
-    background: transparent; color: var(--ink);
-    border: 1px solid var(--rule); border-radius: 999px;
-    padding: .35rem .5rem; font-size: .8rem; font-weight: 600;
-    font-family: inherit; cursor: pointer; line-height: 1;
-}
-.nav-lang:hover { border-color: var(--accent); }
-.nav-lang option { background: var(--paper); color: var(--ink); }
+/* Taal-keuze in de header-nav (NL/EN/DE) — eigen gestylede dropdown. */
+.lang-menu { position: relative; }
+.lang-menu > summary {
+    list-style: none; cursor: pointer;
+    display: inline-flex; align-items: center; gap: .3rem;
+    padding: .35rem .55rem; border-radius: 999px;
+    border: 1px solid var(--rule); background: transparent; color: var(--ink);
+}
+.lang-menu > summary::-webkit-details-marker { display: none; }
+.lang-menu > summary:hover { border-color: var(--accent); }
+.lang-toggle .lang-code { font-size: .8rem; font-weight: 700; letter-spacing: .02em; }
+.lang-toggle .icon { width: 16px; height: 16px; opacity: .8; }
+.lang-caret { width: 12px; height: 12px; opacity: .7; transition: transform .15s; }
+.lang-menu[open] .lang-caret { transform: rotate(180deg); }
+.lang-dropdown {
+    position: absolute; top: calc(100% + 8px); right: 0;
+    min-width: 170px; z-index: 60;
+    background: var(--paper); border: 1px solid var(--rule);
+    border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.22);
+    padding: .35rem; display: flex; flex-direction: column;
+}
+.lang-item {
+    display: flex; align-items: center; gap: .6rem;
+    padding: .5rem .65rem; border-radius: 8px;
+    color: var(--ink); text-decoration: none; font-size: .9rem;
+}
+.lang-item:hover { background: var(--paper-2); }
+.lang-item.is-active { color: var(--accent); font-weight: 600; }
+.lang-item-code {
+    font-size: .7rem; font-weight: 700; opacity: .6;
+    min-width: 1.6em;
+}
 @media (max-width: 400px) {
     .masthead { padding: calc(.5rem + var(--safe-top)) 0 .5rem; }

src/views/partials/topnav.ejs

@@ -82 +82 @@
       </button>
 
-      <% if (typeof langs !== 'undefined' && langs && langs.length > 1) { %>
-        <select class="nav-lang" aria-label="<%= t('nav.language') %>" title="<%= t('nav.language') %>"
-                onchange="location.href='/lang/'+this.value+'?r='+encodeURIComponent(location.pathname+location.search)">
-          <% langs.forEach(function(l){ %><option value="<%= l.code %>"<%= l.active ? ' selected' : '' %>><%= l.code.toUpperCase() %></option><% }); %>
-        </select>
+      <% if (typeof langs !== 'undefined' && langs && langs.length > 1) {
+           var _curLang = (langs.find(function(l){ return l.active; }) || { code: 'nl' }).code;
+           var _langR = (typeof currentPath !== 'undefined' && currentPath) ? currentPath : '/';
+      %>
+        <details class="lang-menu">
+          <summary class="nav-btn lang-toggle" aria-label="<%= t('nav.language') %>" title="<%= t('nav.language') %>">
+            <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="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
+            <span class="lang-code"><%= _curLang.toUpperCase() %></span>
+            <svg class="lang-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="6 9 12 15 18 9"/></svg>
+          </summary>
+          <div class="lang-dropdown" role="menu">
+            <% langs.forEach(function(l){ %>
+              <a class="lang-item<%= l.active ? ' is-active' : '' %>" role="menuitem" href="/lang/<%= l.code %>?r=<%= encodeURIComponent(_langR) %>"><span class="lang-item-code"><%= l.code.toUpperCase() %></span><%= l.name %></a>
+            <% }); %>
+          </div>
+        </details>
       <% } %>
 
@@ -210 +221 @@
     if (e.target.closest('#search-toggle')) { openSearch(); return; }
     if (e.target.closest('#search-close')) { closeSearch(); return; }
-    // Gebruikersmenu sluiten bij klik erbuiten.
-    var open = document.querySelector('.user-menu[open]');
-    if (open && !open.contains(e.target)) open.removeAttribute('open');
+    // Open dropdowns (gebruikersmenu + taalkeuze) sluiten bij klik erbuiten.
+    document.querySelectorAll('.user-menu[open], .lang-menu[open]').forEach(function(d) {
+      if (!d.contains(e.target)) d.removeAttribute('open');
+    });
   });
 

src/views/shell.ejs

@@ -163 +163 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=27">
+<link rel="stylesheet" href="/assets/css/style.css?v=28">
 
 <!-- Audio player styles: loaded on every page so the mini-player works