This commit is contained in:
Vrezh Babakekhian 2025-07-03 23:35:22 -03:00 committed by GitHub
commit 1fd1c56581
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 71 additions and 17 deletions

View file

@ -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'],

View file

@ -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

View file

@ -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>

View file

@ -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.",

View file

@ -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の使い方を学ぶ。",