This commit is contained in:
Rion 2025-06-15 06:13:31 -06:00 committed by GitHub
commit c5370f7fc9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 72 additions and 0 deletions

View file

@ -0,0 +1,49 @@
---
import { Dropdown, DropdownItems } from 'astro-navbar'
import { i18n } from '~/constants/i18n'
import LanguagesIcon from '~/icons/LanguagesIcon.astro'
import { getPath } from '~/utils/i18n'
interface Props {
label?: string
className?: string
}
const { label = 'Toggle i18n', className = '' } = Astro.props
---
<Dropdown class="group">
<button
type="button"
class:list={['inline-flex h-8 w-8 cursor-pointer items-center justify-center', className]}
aria-label={label}
>
<LanguagesIcon />
</button>
<DropdownItems>
<div class="navbar-dropdown !grid-cols-1 gap-1">
{
i18n.LOCALES.map(locale => (
<a class="dropdown-item" href={getPath(locale.value)(Astro.url.pathname)} aria-label={locale.label}>
<div class="dropdown-title">{locale.label}</div>
</a>
))
}
</div>
</DropdownItems>
</Dropdown>
<style>
.navbar-dropdown {
@apply absolute mt-2 grid !-translate-x-1/2 !transform grid-cols-2 gap-2 rounded-lg border-2 border-dark bg-paper p-3 shadow-sm;
}
.navbar-dropdown .dropdown-item {
@apply flex cursor-pointer select-none flex-col gap-1 rounded-lg p-3 pl-8 transition-colors duration-200;
}
.navbar-dropdown .dropdown-item:hover {
@apply bg-muted;
}
.navbar-dropdown .dropdown-title {
@apply text-right font-bold;
}
</style>

View file

@ -6,6 +6,7 @@ import ChevronDownIcon from '~/icons/ChevronDownIcon.astro'
import DownloadIcon from '~/icons/DownloadIcon.astro' import DownloadIcon from '~/icons/DownloadIcon.astro'
import MenuIcon from '~/icons/MenuIcon.astro' import MenuIcon from '~/icons/MenuIcon.astro'
import { getLocale, getPath, getUI } from '~/utils/i18n' import { getLocale, getPath, getUI } from '~/utils/i18n'
import I18nSwitch from './I18nSwitch.astro'
import Logo from './Logo.astro' import Logo from './Logo.astro'
import MobileMenu from './MobileMenu.astro' import MobileMenu from './MobileMenu.astro'
import ThemeSwitch from './ThemeSwitch.astro' import ThemeSwitch from './ThemeSwitch.astro'
@ -106,6 +107,9 @@ const {
</a> </a>
</div> </div>
<div class="flex items-center gap-2 place-self-end lg:gap-4"> <div class="flex items-center gap-2 place-self-end lg:gap-4">
<div id="i18n-switcher">
<I18nSwitch label="Toggle language" />
</div>
<div id="theme-switcher"> <div id="theme-switcher">
<ThemeSwitch label="Toggle theme" /> <ThemeSwitch label="Toggle theme" />
</div> </div>

View file

@ -0,0 +1,19 @@
---
const { class: className, ...props } = Astro.props
---
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class:list={['lucide lucide-languages-icon lucide-languages', className]}
{...props}
><path d="m5 8 6 6"></path><path d="m4 14 6-6 2-3"></path><path d="M2 5h12"></path><path
d="M7 2h1"></path><path d="m22 22-5-10-5 10"></path><path d="M14 18h6"></path></svg
>