mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 09:20:00 +02:00
feat: re-sign all previous work
This commit is contained in:
parent
7ed69308ba
commit
2854cd02ca
4 changed files with 64 additions and 17 deletions
|
@ -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,16 @@ const {
|
|||
</div>
|
||||
</DropdownItems>
|
||||
</Dropdown>
|
||||
<a class="hidden items-center lg:block" href={getLocalePath('/mods')}>
|
||||
<a
|
||||
class={`hidden items-center hover:bg-muted rounded-lg p-3 lg:block${Astro.url.pathname === getLocalePath('/about') ? ' text-coral' : ''}`}
|
||||
href={getLocalePath('/about')}
|
||||
>
|
||||
<span>{menu.aboutUs}</span>
|
||||
</a>
|
||||
<a
|
||||
class={`hidden items-center hover:bg-muted rounded-lg p-3 lg:block${Astro.url.pathname === getLocalePath('/mods') ? ' text-coral' : ''}`}
|
||||
href={getLocalePath('/mods')}
|
||||
>
|
||||
<span>{menu.mods}</span>
|
||||
</a>
|
||||
</div>
|
||||
|
@ -135,7 +138,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 +161,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>
|
||||
|
|
|
@ -502,7 +502,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.",
|
||||
|
|
|
@ -507,7 +507,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