Spaces:
Running
Running
File size: 2,604 Bytes
afa9e42 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
---
import { languages, getLangFromUrl } from '../i18n/ui';
import { Globe } from 'lucide-astro';
const lang = getLangFromUrl(Astro.url);
const currentPath = Astro.url.pathname;
---
<div class="relative" data-language-selector>
<button class="flex items-center space-x-2 rtl:space-x-reverse text-white hover:text-blueprint-accent transition-colors duration-300 p-2 rounded-lg hover:bg-white/10" data-language-button>
<Globe class="w-5 h-5" />
<span class="text-sm font-medium hidden sm:block">{languages[lang]}</span>
</button>
<div class="absolute top-full right-0 mt-2 w-32 bg-white dark:bg-blueprint-primary rounded-lg shadow-xl border border-blueprint-accent/20 hidden z-50" data-language-dropdown>
<div class="py-2">
{Object.entries(languages).map(([code, name]) => {
return (
<button
class={`block w-full text-left px-4 py-2 text-sm transition-colors duration-200 ${
code === lang
? 'bg-blueprint-accent text-white'
: 'text-blueprint-dark dark:text-white hover:bg-blueprint-light dark:hover:bg-blueprint-accent/20'
}`}
data-lang={code}
>
{name}
</button>
);
})}
</div>
</div>
</div>
<script>
// Language selector dropdown
const languageSelector = document.querySelector('[data-language-selector]');
const languageButton = document.querySelector('[data-language-button]');
const languageDropdown = document.querySelector('[data-language-dropdown]');
languageButton?.addEventListener('click', (e) => {
e.stopPropagation();
languageDropdown?.classList.toggle('hidden');
});
document.addEventListener('click', (e) => {
if (!languageSelector?.contains(e.target as Node)) {
languageDropdown?.classList.add('hidden');
}
});
// Handle language selection
languageDropdown?.addEventListener('click', (e) => {
const target = e.target as HTMLElement;
const selectedLang = target.getAttribute('data-lang');
if (selectedLang) {
const currentPath = window.location.pathname;
let newPath;
if (selectedLang === 'ar') {
// Going to Arabic (default) - remove /en prefix
newPath = currentPath === '/en' || currentPath === '/en/' ? '/' : currentPath.replace('/en', '') || '/';
} else {
// Going to English - add /en prefix
newPath = currentPath === '/' ? '/en' : `/en${currentPath}`;
}
window.location.href = newPath;
}
languageDropdown.classList.add('hidden');
});
</script> |