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({
|
||||
integrations: [tailwind(), react(), sitemap()],
|
||||
site: 'https://zen-browser.app',
|
||||
trailingSlash: 'never',
|
||||
i18n: {
|
||||
defaultLocale: 'en',
|
||||
locales: ['en', 'ja'],
|
||||
|
|
|
@ -71,11 +71,6 @@ const {
|
|||
>{menu.donate}</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href={getLocalePath('/about')} class="block text-dark hover:text-coral"
|
||||
>{menu.aboutUs}</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://docs.zen-browser.app" class="block text-dark hover:text-coral"
|
||||
>{menu.documentation}</a
|
||||
|
@ -91,6 +86,10 @@ const {
|
|||
</ul>
|
||||
</li>
|
||||
<!-- Extra Links -->
|
||||
<li>
|
||||
<a href={getLocalePath('/about')} class="block text-dark hover:text-coral">{menu.aboutUs}</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href={getLocalePath('/mods')} class="block font-bold text-dark hover:text-coral"
|
||||
>{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"
|
||||
>
|
||||
<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>
|
||||
<ChevronDownIcon
|
||||
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
|
||||
|
@ -66,7 +66,7 @@ const {
|
|||
</DropdownItems>
|
||||
</Dropdown>
|
||||
<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>
|
||||
<ChevronDownIcon
|
||||
class="size-4 transform transition-transform duration-200 group-open:rotate-180 md:ml-2"
|
||||
|
@ -80,12 +80,6 @@ const {
|
|||
{menu.donateDesc}
|
||||
</div>
|
||||
</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">
|
||||
<div class="dropdown-title">{menu.documentation}</div>
|
||||
<div class="dropdown-description">
|
||||
|
@ -101,7 +95,22 @@ const {
|
|||
</div>
|
||||
</DropdownItems>
|
||||
</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>
|
||||
</a>
|
||||
</div>
|
||||
|
@ -135,7 +144,7 @@ const {
|
|||
|
||||
<style>
|
||||
.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 {
|
||||
@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;
|
||||
}
|
||||
</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!",
|
||||
"donate": "Donate ❤️",
|
||||
"donateDesc": "Support the development of Zen with a donation.",
|
||||
"aboutUs": "About Us 🌟",
|
||||
"aboutUs": "About Us",
|
||||
"aboutUsDesc": "Learn more about the team behind Zen.",
|
||||
"documentation": "Documentation",
|
||||
"documentationDesc": "Learn how to use Zen with our documentation.",
|
||||
|
|
|
@ -511,7 +511,7 @@
|
|||
"discordDesc": "Discordコミュニティで他のZenユーザーと交流!",
|
||||
"donate": "寄付 ❤️",
|
||||
"donateDesc": "Zen開発を寄付で応援。",
|
||||
"aboutUs": "私たちについて 🌟",
|
||||
"aboutUs": "私たちについて",
|
||||
"aboutUsDesc": "Zenのチームについて知る。",
|
||||
"documentation": "ドキュメント",
|
||||
"documentationDesc": "ドキュメントでZenの使い方を学ぶ。",
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue