From af47846f236abfd6c3d454332245b173b0d983f3 Mon Sep 17 00:00:00 2001
From: James <james@jongsma.me>
Date: Thu, 9 Apr 2026 03:39:51 -0400
Subject: [PATCH] web: split language/currency selector into two dropdowns
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replaces the combined locale dropdown with two independent selectors:
- Language dropdown: flag + 2-letter code (e.g., '🇺🇸 EN')
- Currency dropdown: symbol + 3-letter code (e.g., '$ USD')

Changes:
- test-index.html: Split combined dropdown into nav-dropdown--language and nav-dropdown--currency
- clavitor.css: Add styles for split selectors with 8px gap, mobile stacking
- JavaScript: Independent state management for each selector

Design requirements met:
- Both dropdowns fit within nav bar without wrapping
- Mobile: stack vertically in hamburger menu
- 8px gap between selectors using existing spacing

fixes #10

Author: Emma <emma-20250409-001>
---
 clavitor.ai/clavitor.css    | 14 +++++++++++++
 clavitor.ai/test-index.html | 41 ++++++++++++++++++++++++++++++-------
 2 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/clavitor.ai/clavitor.css b/clavitor.ai/clavitor.css
index 67fb0c2..1af485f 100644
--- a/clavitor.ai/clavitor.css
+++ b/clavitor.ai/clavitor.css
@@ -133,6 +133,20 @@ code               { font-size: 0.875em; }
 .nav-dropdown-item     { display: block; padding: 6px 16px; font-size: 0.825rem; color: var(--text-secondary); font-weight: 500; white-space: nowrap; }
 .nav-dropdown-item:hover { color: var(--text); background: var(--surface); }
 
+/* === SPLIT LANGUAGE/CURRENCY SELECTORS === */
+.nav-dropdown--language,
+.nav-dropdown--currency { display: inline-block; }
+.nav-dropdown--language .nav-dropdown-trigger,
+.nav-dropdown--currency .nav-dropdown-trigger { min-width: 60px; justify-content: center; }
+.nav-dropdown--language + .nav-dropdown--currency { margin-left: 8px; }
+@media (max-width: 768px) {
+  .nav-dropdown--language,
+  .nav-dropdown--currency { display: block; width: 100%; }
+  .nav-dropdown--language + .nav-dropdown--currency { margin-left: 0; margin-top: 0.5rem; }
+  .nav-dropdown--language .nav-dropdown-menu,
+  .nav-dropdown--currency .nav-dropdown-menu { position: static; right: auto; left: auto; transform: none; box-shadow: none; border: none; padding-left: 16px; min-width: 0; }
+}
+
 /* === BUTTONS === */
 .btn               { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: 0.875rem; font-weight: 600; padding: 0.625rem 1.25rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: all 100ms ease; text-align: center; text-decoration: none; }
 .btn-primary       { background: var(--brand-black); color: #ffffff; border-color: var(--brand-black); }
diff --git a/clavitor.ai/test-index.html b/clavitor.ai/test-index.html
index 7a85164..fd6845e 100644
--- a/clavitor.ai/test-index.html
+++ b/clavitor.ai/test-index.html
@@ -46,16 +46,18 @@
                 </div>
             </div>
             <a href="/pricing" class="nav-link active">Pricing</a>
-            <div class="nav-dropdown nav-dropdown--locale">
-                <span class="nav-link nav-dropdown-trigger" id="localeTrigger">🌐 EN / $</span>
+            <div class="nav-dropdown nav-dropdown--language">
+                <span class="nav-link nav-dropdown-trigger" id="languageTrigger">🇺🇸 EN</span>
                 <div class="nav-dropdown-menu nav-dropdown-menu--right">
-                    <div style="padding:8px 16px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em;">Language</div>
                     <a href="/" class="nav-dropdown-item active" data-lang="en">🇺🇸 English</a>
                     <a href="/de" class="nav-dropdown-item" data-lang="de">🇩🇪 Deutsch</a>
-                    <div style="border-top:1px solid var(--border);margin:8px 0;"></div>
-                    <div style="padding:8px 16px;font-size:11px;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:0.08em;">Currency</div>
-                    <a href="#" class="nav-dropdown-item active" data-currency="USD">USD $</a>
-                    <a href="#" class="nav-dropdown-item" data-currency="EUR">EUR €</a>
+                </div>
+            </div>
+            <div class="nav-dropdown nav-dropdown--currency">
+                <span class="nav-link nav-dropdown-trigger" id="currencyTrigger">$ USD</span>
+                <div class="nav-dropdown-menu nav-dropdown-menu--right">
+                    <a href="#" class="nav-dropdown-item active" data-currency="USD">$ USD</a>
+                    <a href="#" class="nav-dropdown-item" data-currency="EUR">€ EUR</a>
                 </div>
             </div>
             <a href="#" class="nav-link btn btn-ghost">Sign in</a>
@@ -128,7 +130,32 @@
 </footer>
 
 <script>
+// Toggle dropdown menus
 document.querySelectorAll('.nav-dropdown-trigger').forEach(t=>t.addEventListener('click',()=>t.parentElement.classList.toggle('open')));
+
+// Language selector state management
+document.querySelectorAll('.nav-dropdown--language .nav-dropdown-item').forEach(item => {
+  item.addEventListener('click', (e) => {
+    e.preventDefault();
+    const lang = item.getAttribute('data-lang');
+    const flag = item.textContent.trim().split(' ')[0];
+    document.getElementById('languageTrigger').textContent = flag + ' ' + lang.toUpperCase();
+    document.querySelectorAll('.nav-dropdown--language .nav-dropdown-item').forEach(i => i.classList.remove('active'));
+    item.classList.add('active');
+  });
+});
+
+// Currency selector state management
+document.querySelectorAll('.nav-dropdown--currency .nav-dropdown-item').forEach(item => {
+  item.addEventListener('click', (e) => {
+    e.preventDefault();
+    const currency = item.getAttribute('data-currency');
+    const symbol = item.textContent.trim().split(' ')[0];
+    document.getElementById('currencyTrigger').textContent = symbol + ' ' + currency;
+    document.querySelectorAll('.nav-dropdown--currency .nav-dropdown-item').forEach(i => i.classList.remove('active'));
+    item.classList.add('active');
+  });
+});
 </script>
 </body>
 </html>