mirror of
https://github.com/zen-browser/www.git
synced 2025-07-07 17:05:32 +02:00
Merge 43c71e830d
into 9ce13b25e9
This commit is contained in:
commit
1fd1c56581
5 changed files with 71 additions and 17 deletions
|
@ -7,6 +7,7 @@ import { defineConfig } from 'astro/config'
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [tailwind(), react(), sitemap()],
|
integrations: [tailwind(), react(), sitemap()],
|
||||||
site: 'https://zen-browser.app',
|
site: 'https://zen-browser.app',
|
||||||
|
trailingSlash: 'never',
|
||||||
i18n: {
|
i18n: {
|
||||||
defaultLocale: 'en',
|
defaultLocale: 'en',
|
||||||
locales: ['en', 'ja'],
|
locales: ['en', 'ja'],
|
||||||
|
|
|
@ -71,11 +71,6 @@ const {
|
||||||
>{menu.donate}</a
|
>{menu.donate}</a
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
|
||||||
<a href={getLocalePath('/about')} class="block text-dark hover:text-coral"
|
|
||||||
>{menu.aboutUs}</a
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
<li>
|
||||||
<a href="https://docs.zen-browser.app" class="block text-dark hover:text-coral"
|
<a href="https://docs.zen-browser.app" class="block text-dark hover:text-coral"
|
||||||
>{menu.documentation}</a
|
>{menu.documentation}</a
|
||||||
|
@ -91,6 +86,10 @@ const {
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<!-- Extra Links -->
|
<!-- Extra Links -->
|
||||||
|
<li>
|
||||||
|
<a href={getLocalePath('/about')} class="block text-dark hover:text-coral">{menu.aboutUs}</a
|
||||||
|
>
|
||||||
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<a href={getLocalePath('/mods')} class="block font-bold text-dark hover:text-coral"
|
<a href={getLocalePath('/mods')} class="block font-bold text-dark hover:text-coral"
|
||||||
>{menu.mods}</a
|
>{menu.mods}</a
|
||||||
|
|
|
@ -32,7 +32,7 @@ const {
|
||||||
class="hidden items-center gap-6 place-self-center text-xs sm:text-sm lg:flex lg:text-base"
|
class="hidden items-center gap-6 place-self-center text-xs sm:text-sm lg:flex lg:text-base"
|
||||||
>
|
>
|
||||||
<Dropdown class="group">
|
<Dropdown class="group">
|
||||||
<button class="flex items-center">
|
<button class="flex items-center rounded-lg p-3 hover:bg-muted group-open:bg-muted">
|
||||||
<span>{menu.gettingStarted}</span>
|
<span>{menu.gettingStarted}</span>
|
||||||
<ChevronDownIcon
|
<ChevronDownIcon
|
||||||
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
|
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
|
||||||
|
@ -66,7 +66,7 @@ const {
|
||||||
</DropdownItems>
|
</DropdownItems>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
<Dropdown class="group">
|
<Dropdown class="group">
|
||||||
<button class="flex items-center">
|
<button class="flex items-center rounded-lg p-3 hover:bg-muted group-open:bg-muted">
|
||||||
<span>{menu.usefulLinks}</span>
|
<span>{menu.usefulLinks}</span>
|
||||||
<ChevronDownIcon
|
<ChevronDownIcon
|
||||||
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
|
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
|
||||||
|
@ -80,12 +80,6 @@ const {
|
||||||
{menu.donateDesc}
|
{menu.donateDesc}
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a class="dropdown-item" href={getLocalePath('/about')}>
|
|
||||||
<div class="dropdown-title">{menu.aboutUs}</div>
|
|
||||||
<div class="dropdown-description">
|
|
||||||
{menu.aboutUsDesc}
|
|
||||||
</div>
|
|
||||||
</a>
|
|
||||||
<a class="dropdown-item" href="https://docs.zen-browser.app">
|
<a class="dropdown-item" href="https://docs.zen-browser.app">
|
||||||
<div class="dropdown-title">{menu.documentation}</div>
|
<div class="dropdown-title">{menu.documentation}</div>
|
||||||
<div class="dropdown-description">
|
<div class="dropdown-description">
|
||||||
|
@ -101,7 +95,22 @@ const {
|
||||||
</div>
|
</div>
|
||||||
</DropdownItems>
|
</DropdownItems>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
<a class="hidden items-center lg:block" href={getLocalePath('/mods')}>
|
<a
|
||||||
|
class:list={[
|
||||||
|
'items-center rounded-lg p-3 hover:bg-muted',
|
||||||
|
Astro.url.pathname === getLocalePath('/about') && 'text-coral',
|
||||||
|
]}
|
||||||
|
href={getLocalePath('/about')}
|
||||||
|
>
|
||||||
|
<span>{menu.aboutUs}</span>
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
class:list={[
|
||||||
|
'items-center rounded-lg p-3 hover:bg-muted',
|
||||||
|
Astro.url.pathname === getLocalePath('/mods') && 'text-coral',
|
||||||
|
]}
|
||||||
|
href={getLocalePath('/mods')}
|
||||||
|
>
|
||||||
<span>{menu.mods}</span>
|
<span>{menu.mods}</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
@ -135,7 +144,7 @@ const {
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.navbar-dropdown {
|
.navbar-dropdown {
|
||||||
@apply absolute left-1/2 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;
|
@apply absolute left-1/2 mt-2 grid !-translate-x-1/2 !transform grid-cols-2 gap-2 rounded-lg border border-dark bg-paper p-3 shadow-lg;
|
||||||
& .dropdown-item {
|
& .dropdown-item {
|
||||||
@apply flex cursor-pointer select-none flex-col gap-2 rounded-lg p-4 transition-colors duration-200;
|
@apply flex cursor-pointer select-none flex-col gap-2 rounded-lg p-4 transition-colors duration-200;
|
||||||
|
|
||||||
|
@ -158,3 +167,48 @@ const {
|
||||||
@apply text-dark;
|
@apply text-dark;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
import { animate, stagger } from 'animejs'
|
||||||
|
|
||||||
|
function animateDropdown(dropdown: Element) {
|
||||||
|
animate(dropdown, {
|
||||||
|
opacity: { from: 0, to: 1 },
|
||||||
|
filter: { from: 'blur(4px)', to: 'blur(0px)' },
|
||||||
|
duration: 300,
|
||||||
|
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
|
||||||
|
})
|
||||||
|
|
||||||
|
const items = dropdown.querySelectorAll('.dropdown-item')
|
||||||
|
if (items.length) {
|
||||||
|
animate(items, {
|
||||||
|
opacity: { from: 0, to: 1 },
|
||||||
|
translateY: { from: 20, to: 0 },
|
||||||
|
filter: { from: 'blur(4px)', to: 'blur(0px)' },
|
||||||
|
duration: 300,
|
||||||
|
delay: stagger(150),
|
||||||
|
easing: 'cubicBezier(0.25, 0.1, 0.25, 1)',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Initialize dropdown animations on page load
|
||||||
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
document.querySelectorAll('.dropdown-toggle').forEach(toggle => {
|
||||||
|
const dropdown = toggle.querySelector('.navbar-dropdown')
|
||||||
|
if (!dropdown) return
|
||||||
|
|
||||||
|
if (!toggle.classList.contains('hidden')) {
|
||||||
|
animateDropdown(dropdown)
|
||||||
|
}
|
||||||
|
|
||||||
|
const observer = new MutationObserver(mutations => {
|
||||||
|
mutations.forEach(mutation => {
|
||||||
|
if (mutation.attributeName === 'class' && !toggle.classList.contains('hidden')) {
|
||||||
|
animateDropdown(dropdown)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
observer.observe(toggle, { attributes: true })
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
|
@ -506,7 +506,7 @@
|
||||||
"discordDesc": "Join our community on Discord to chat with other Zen users!",
|
"discordDesc": "Join our community on Discord to chat with other Zen users!",
|
||||||
"donate": "Donate ❤️",
|
"donate": "Donate ❤️",
|
||||||
"donateDesc": "Support the development of Zen with a donation.",
|
"donateDesc": "Support the development of Zen with a donation.",
|
||||||
"aboutUs": "About Us 🌟",
|
"aboutUs": "About Us",
|
||||||
"aboutUsDesc": "Learn more about the team behind Zen.",
|
"aboutUsDesc": "Learn more about the team behind Zen.",
|
||||||
"documentation": "Documentation",
|
"documentation": "Documentation",
|
||||||
"documentationDesc": "Learn how to use Zen with our documentation.",
|
"documentationDesc": "Learn how to use Zen with our documentation.",
|
||||||
|
|
|
@ -511,7 +511,7 @@
|
||||||
"discordDesc": "Discordコミュニティで他のZenユーザーと交流!",
|
"discordDesc": "Discordコミュニティで他のZenユーザーと交流!",
|
||||||
"donate": "寄付 ❤️",
|
"donate": "寄付 ❤️",
|
||||||
"donateDesc": "Zen開発を寄付で応援。",
|
"donateDesc": "Zen開発を寄付で応援。",
|
||||||
"aboutUs": "私たちについて 🌟",
|
"aboutUs": "私たちについて",
|
||||||
"aboutUsDesc": "Zenのチームについて知る。",
|
"aboutUsDesc": "Zenのチームについて知る。",
|
||||||
"documentation": "ドキュメント",
|
"documentation": "ドキュメント",
|
||||||
"documentationDesc": "ドキュメントでZenの使い方を学ぶ。",
|
"documentationDesc": "ドキュメントでZenの使い方を学ぶ。",
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue