59 lines
2.3 KiB
Plaintext
59 lines
2.3 KiB
Plaintext
---
|
|
import {
|
|
getLocaleFromPath,
|
|
localeLabels,
|
|
localizedPath,
|
|
stripLocalePrefix,
|
|
} from '@/i18n';
|
|
import Icon from './icons/Icon.astro';
|
|
|
|
const currentLocale = getLocaleFromPath(Astro.url.pathname);
|
|
const currentPath = stripLocalePrefix(Astro.url.pathname);
|
|
---
|
|
|
|
<div class="hs-dropdown relative inline-flex">
|
|
<button
|
|
id="hs-language-dropdown"
|
|
type="button"
|
|
aria-label="Sprache wechseln"
|
|
title="Sprache wechseln"
|
|
class="hs-dropdown-toggle inline-flex items-center gap-x-2 rounded-lg px-1.5 py-1.5 text-sm font-medium text-neutral-600 ring-zinc-500 outline-hidden transition duration-300 hover:bg-neutral-200 hover:text-orange-400 dark:border-neutral-700 dark:text-neutral-400 dark:ring-zinc-200 dark:hover:bg-neutral-700 dark:hover:text-orange-300 dark:focus:outline-hidden"
|
|
>
|
|
<Icon name="earth" />
|
|
<span class="sr-only">{localeLabels[currentLocale]}</span>
|
|
<svg
|
|
class="hs-dropdown-open:rotate-180 size-4"
|
|
width="24"
|
|
height="24"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg
|
|
>
|
|
</button>
|
|
|
|
<div
|
|
class="hs-dropdown-menu duration hs-dropdown-open:opacity-100 top-[98%]! left-[20%]! mt-2 hidden transform-none! rounded-lg bg-neutral-50 p-2 opacity-0 shadow-md transition-[opacity,margin] before:absolute before:start-0 before:-top-4 before:h-4 before:w-full after:absolute after:start-0 after:-bottom-4 after:h-4 after:w-full md:top-[80%]! md:left-[90%]! dark:divide-neutral-700 dark:border dark:border-neutral-700 dark:bg-neutral-800"
|
|
aria-labelledby="hs-language-dropdown"
|
|
>
|
|
{
|
|
Object.entries(localeLabels).map(([locale, label]) => (
|
|
<a
|
|
class:list={[
|
|
'flex items-center gap-x-3.5 rounded-lg px-3 py-2 text-sm hover:bg-neutral-100 focus:bg-neutral-100 focus:outline-hidden dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700',
|
|
locale === currentLocale
|
|
? 'font-semibold text-orange-500 dark:text-orange-300'
|
|
: 'text-neutral-800 dark:text-neutral-400',
|
|
]}
|
|
href={localizedPath(currentPath, locale as 'de' | 'en')}
|
|
aria-current={locale === currentLocale ? 'true' : undefined}
|
|
>
|
|
{label}
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|