mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 17:30:01 +02:00
Merge 55ad59bca7
into 378ea8d88b
This commit is contained in:
commit
c5370f7fc9
3 changed files with 72 additions and 0 deletions
49
src/components/I18nSwitch.astro
Normal file
49
src/components/I18nSwitch.astro
Normal 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>
|
|
@ -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>
|
||||||
|
|
19
src/icons/LanguagesIcon.astro
Normal file
19
src/icons/LanguagesIcon.astro
Normal 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
|
||||||
|
>
|
Loading…
Add table
Add a link
Reference in a new issue