mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 09:20:00 +02:00
feat: language selection dropdown
This commit is contained in:
parent
90bc834523
commit
d60f37e770
5 changed files with 91 additions and 2 deletions
2
.vscode/settings.json
vendored
2
.vscode/settings.json
vendored
|
@ -15,7 +15,7 @@
|
||||||
"eslint.format.enable": false,
|
"eslint.format.enable": false,
|
||||||
"prettier.requireConfig": true,
|
"prettier.requireConfig": true,
|
||||||
"[astro]": {
|
"[astro]": {
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
"editor.defaultFormatter": "astro-build.astro-vscode"
|
||||||
},
|
},
|
||||||
"[typescript]": {
|
"[typescript]": {
|
||||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
|
|
66
src/components/I18nSwitch.astro
Normal file
66
src/components/I18nSwitch.astro
Normal file
|
@ -0,0 +1,66 @@
|
||||||
|
---
|
||||||
|
import { Dropdown, DropdownItems } from 'astro-navbar'
|
||||||
|
import LanguagesIcon from '~/icons/Languages.astro'
|
||||||
|
import { getLocale, getPath, getUI } from '~/utils/i18n'
|
||||||
|
|
||||||
|
const locale = getLocale(Astro)
|
||||||
|
const getLocalePath = getPath(locale)
|
||||||
|
|
||||||
|
const {
|
||||||
|
components: {
|
||||||
|
nav: { menu },
|
||||||
|
},
|
||||||
|
} = getUI(locale)
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
label?: string
|
||||||
|
className?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const { label, className = '' } = Astro.props
|
||||||
|
---
|
||||||
|
|
||||||
|
<Dropdown class="group">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class:list={['inline-flex h-8 w-8 cursor-pointer items-center justify-center', className]}
|
||||||
|
id="i18n-switcher"
|
||||||
|
aria-label={label || 'Toggle i18n'}
|
||||||
|
>
|
||||||
|
<LanguagesIcon />
|
||||||
|
</button>
|
||||||
|
<DropdownItems>
|
||||||
|
<div class="navbar-dropdown !grid-cols-1 gap-1">
|
||||||
|
<a class="dropdown-item" href={Astro.url.pathname.replace(/^\/ja\//, '/')}>
|
||||||
|
<div class="dropdown-title">English</div>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class="dropdown-item"
|
||||||
|
href={Astro.url.pathname.startsWith('/ja')
|
||||||
|
? Astro.url.pathname
|
||||||
|
: `/ja${Astro.url.pathname}`}
|
||||||
|
>
|
||||||
|
<div class="dropdown-title">日本語</div>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</DropdownItems>
|
||||||
|
</Dropdown>
|
||||||
|
|
||||||
|
<script></script>
|
||||||
|
|
||||||
|
<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;
|
||||||
|
& .dropdown-item {
|
||||||
|
@apply flex cursor-pointer select-none flex-col gap-1 rounded-lg p-3 pl-8 transition-colors duration-200;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
@apply bg-muted;
|
||||||
|
}
|
||||||
|
|
||||||
|
& .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 i18n" />
|
||||||
|
</div>
|
||||||
<div id="theme-switcher">
|
<div id="theme-switcher">
|
||||||
<ThemeSwitch label="Toggle theme" />
|
<ThemeSwitch label="Toggle theme" />
|
||||||
</div>
|
</div>
|
||||||
|
|
19
src/icons/Languages.astro
Normal file
19
src/icons/Languages.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
|
||||||
|
>
|
|
@ -1,10 +1,10 @@
|
||||||
---
|
---
|
||||||
import { Image } from 'astro:assets'
|
import { Image } from 'astro:assets'
|
||||||
|
import Button from '~/components/Button.astro'
|
||||||
import Description from '~/components/Description.astro'
|
import Description from '~/components/Description.astro'
|
||||||
import Layout from '~/layouts/Layout.astro'
|
import Layout from '~/layouts/Layout.astro'
|
||||||
import { getLocale, getUI } from '~/utils/i18n'
|
import { getLocale, getUI } from '~/utils/i18n'
|
||||||
export { getStaticPaths } from '~/utils/i18n'
|
export { getStaticPaths } from '~/utils/i18n'
|
||||||
import Button from '~/components/Button.astro'
|
|
||||||
|
|
||||||
const locale = getLocale(Astro)
|
const locale = getLocale(Astro)
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue