johan
/
clavitor
1
0
Fork 0
Code Issues 4 Pull Requests 6 Packages Projects Releases Wiki Activity

web: split language/currency selector into two dropdowns 

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>
This commit is contained in:
James 2026-04-09 03:39:51 -04:00
parent 989f7e5f2b
commit af47846f23
2 changed files with 48 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
clavitor.ai/clavitor.css
View File

@ -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); }

41
clavitor.ai/test-index.html
View File

@ -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>