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

Luna: Split language/currency selector into two dropdowns #17

Open
luna wants to merge 1 commits from luna/design-10 into master
pull from: luna/design-10
merge into: johan:master
Conversation 5 Commits 1 Files Changed 1 +59 -31
1 changed files with 59 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
clavitor.ai/templates/base.tmpl
View File

@ -104,19 +104,21 @@
</div>
</div>
<a href="/pricing" class="nav-link{{if eq .ActiveNav "pricing"}} active{{end}}">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>
<a href="/fr" class="nav-dropdown-item" data-lang="fr">🇫🇷 Français</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>
<a href="#" class="nav-dropdown-item" data-currency="CHF">CHF</a>
<a href="#" class="nav-dropdown-item" data-currency="GBP">GBP £</a>
<a href="#" class="nav-dropdown-item" data-currency="GBP">£ GBP</a>
</div>
</div>
<a href="#" class="nav-link btn btn-ghost">Sign in</a>
@ -173,36 +175,30 @@
<script>
document.querySelectorAll('.nav-dropdown-trigger').forEach(t=>t.addEventListener('click',()=>t.parentElement.classList.toggle('open')));
// Locale selector
// Language selector state management
(function() {
const localeTrigger = document.getElementById('localeTrigger');
if (!localeTrigger) return;
const languageTrigger = document.getElementById('languageTrigger');
if (!languageTrigger) return;
const dropdown = localeTrigger.parentElement;
const dropdown = languageTrigger.closest('.nav-dropdown--language');
const langItems = dropdown.querySelectorAll('[data-lang]');
const currencyItems = dropdown.querySelectorAll('[data-currency]');
// Load saved preferences
// Load saved preference
const saved = JSON.parse(localStorage.getItem('clavitor-locale') || '{}');
const currentLang = saved.lang || 'en';
const currentCurrency = saved.currency || 'USD';
const langFlags = { en: '🇺🇸', de: '🇩🇪', fr: '🇫🇷' };
function updateDisplay() {
const lang = dropdown.querySelector('[data-lang].active')?.dataset.lang || currentLang;
const currency = dropdown.querySelector('[data-currency].active')?.dataset.currency || currentCurrency;
const langFlags = { en: '🇺🇸', de: '🇩🇪', fr: '🇫🇷' };
localeTrigger.textContent = `${langFlags[lang] || '🌐'} ${lang.toUpperCase()} / ${currency}`;
languageTrigger.textContent = (langFlags[lang] || '🌐') + ' ' + lang.toUpperCase();
}
// Set initial active states
// Set initial active state
langItems.forEach(el => {
if (el.dataset.lang === currentLang) el.classList.add('active');
else el.classList.remove('active');
});
currencyItems.forEach(el => {
if (el.dataset.currency === currentCurrency) el.classList.add('active');
else el.classList.remove('active');
});
updateDisplay();
// Handle language selection
@ -210,19 +206,51 @@ document.querySelectorAll('.nav-dropdown-trigger').forEach(t=>t.addEventListener
e.preventDefault();
langItems.forEach(i => i.classList.remove('active'));
el.classList.add('active');
localStorage.setItem('clavitor-locale', JSON.stringify({ lang: el.dataset.lang, currency: currentCurrency }));
const saved = JSON.parse(localStorage.getItem('clavitor-locale') || '{}');
saved.lang = el.dataset.lang;
localStorage.setItem('clavitor-locale', JSON.stringify(saved));
updateDisplay();
// Navigate to language path
if (el.dataset.lang === 'en') window.location.href = '/';
else window.location.href = '/' + el.dataset.lang;
}));
})();
// Currency selector state management
(function() {
const currencyTrigger = document.getElementById('currencyTrigger');
if (!currencyTrigger) return;
const dropdown = currencyTrigger.closest('.nav-dropdown--currency');
const currencyItems = dropdown.querySelectorAll('[data-currency]');
// Load saved preference
const saved = JSON.parse(localStorage.getItem('clavitor-locale') || '{}');
const currentCurrency = saved.currency || 'USD';
const currencySymbols = { USD: '$', EUR: '€', CHF: '', GBP: '£' };
function updateDisplay() {
const currency = dropdown.querySelector('[data-currency].active')?.dataset.currency || currentCurrency;
const symbol = currencySymbols[currency] || '';
currencyTrigger.textContent = symbol + ' ' + currency;
}
// Set initial active state
currencyItems.forEach(el => {
if (el.dataset.currency === currentCurrency) el.classList.add('active');
else el.classList.remove('active');
});
updateDisplay();
// Handle currency selection
currencyItems.forEach(el => el.addEventListener('click', (e) => {
e.preventDefault();
currencyItems.forEach(i => i.classList.remove('active'));
el.classList.add('active');
localStorage.setItem('clavitor-locale', JSON.stringify({ lang: currentLang, currency: el.dataset.currency }));
const saved = JSON.parse(localStorage.getItem('clavitor-locale') || '{}');
saved.currency = el.dataset.currency;
localStorage.setItem('clavitor-locale', JSON.stringify(saved));
updateDisplay();
// Refresh page to apply currency (or fetch rates via JS)
window.location.reload();