From 2854cd02cab75aefbe9e556f0d434e2144cb2aff Mon Sep 17 00:00:00 2001
From: Vrezh Fedora <vrezhraiden@gmail.com>
Date: Sat, 21 Jun 2025 22:17:27 +0200
Subject: [PATCH 1/4] feat: re-sign all previous work

---
 src/components/MobileMenu.astro |  9 ++---
 src/components/NavBar.astro     | 68 ++++++++++++++++++++++++++++-----
 src/i18n/en/translation.json    |  2 +-
 src/i18n/ja/translation.json    |  2 +-
 4 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/src/components/MobileMenu.astro b/src/components/MobileMenu.astro
index 8efb4d1..39b2d9a 100644
--- a/src/components/MobileMenu.astro
+++ b/src/components/MobileMenu.astro
@@ -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
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 66d60bb..f50286d 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -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>
diff --git a/src/i18n/en/translation.json b/src/i18n/en/translation.json
index 9bc44c2..352deff 100644
--- a/src/i18n/en/translation.json
+++ b/src/i18n/en/translation.json
@@ -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.",
diff --git a/src/i18n/ja/translation.json b/src/i18n/ja/translation.json
index 2c371c4..e5483b0 100644
--- a/src/i18n/ja/translation.json
+++ b/src/i18n/ja/translation.json
@@ -507,7 +507,7 @@
         "discordDesc": "Discordコミュニティで他のZenユーザーと交流！",
         "donate": "寄付 ❤️",
         "donateDesc": "Zen開発を寄付で応援。",
-        "aboutUs": "私たちについて 🌟",
+        "aboutUs": "私たちについて",
         "aboutUsDesc": "Zenのチームについて知る。",
         "documentation": "ドキュメント",
         "documentationDesc": "ドキュメントでZenの使い方を学ぶ。",

From 6203e8a5737821b2093dbf0ff7f92673b9d7a649 Mon Sep 17 00:00:00 2001
From: Vrezh Fedora <vrezhraiden@gmail.com>
Date: Sun, 22 Jun 2025 13:48:44 +0200
Subject: [PATCH 2/4] fix: fix trailing slash of Astro.url.pathname

---
 astro.config.mjs            |  1 +
 src/components/NavBar.astro | 22 ++++++++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/astro.config.mjs b/astro.config.mjs
index 8cc48b5..f95d0c4 100644
--- a/astro.config.mjs
+++ b/astro.config.mjs
@@ -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'],
diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index f50286d..08d2c31 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -96,13 +96,31 @@ const {
         </DropdownItems>
       </Dropdown>
       <a
-        class={`hidden items-center hover:bg-muted rounded-lg p-3 lg:block${Astro.url.pathname === getLocalePath('/about') ? ' text-coral' : ''}`}
+        class:list={{
+          hidden: true,
+          'items-center': true,
+          'hover:bg-muted': true,
+          'rounded-lg': true,
+          'p-3': true,
+          'lg:block': true,
+          'text-coral': Astro.url.pathname === getLocalePath('/about'),
+        }}
+        data-active={Astro.url.pathname === getLocalePath('/about')}
         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' : ''}`}
+        class:list={{
+          hidden: true,
+          'items-center': true,
+          'hover:bg-muted': true,
+          'rounded-lg': true,
+          'p-3': true,
+          'lg:block': true,
+          'text-coral': Astro.url.pathname === getLocalePath('/mods'),
+        }}
+        data-active={Astro.url.pathname === getLocalePath('/mods')}
         href={getLocalePath('/mods')}
       >
         <span>{menu.mods}</span>

From 3ee3300f5c5ae206933bf06853eaf568911baadb Mon Sep 17 00:00:00 2001
From: Vrezh Fedora <vrezhraiden@gmail.com>
Date: Sun, 22 Jun 2025 13:57:13 +0200
Subject: [PATCH 3/4] Refactor: Improve NavBar class list syntax

---
 src/components/NavBar.astro | 38 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 20 deletions(-)

diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 08d2c31..11b3204 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -96,31 +96,29 @@ const {
         </DropdownItems>
       </Dropdown>
       <a
-        class:list={{
-          hidden: true,
-          'items-center': true,
-          'hover:bg-muted': true,
-          'rounded-lg': true,
-          'p-3': true,
-          'lg:block': true,
-          'text-coral': Astro.url.pathname === getLocalePath('/about'),
-        }}
-        data-active={Astro.url.pathname === getLocalePath('/about')}
+        class:list={[
+          'hidden',
+          'items-center',
+          'hover:bg-muted',
+          'rounded-lg',
+          'p-3',
+          'lg:block',
+          { 'text-coral': Astro.url.pathname === getLocalePath('/about') },
+        ]}
         href={getLocalePath('/about')}
       >
         <span>{menu.aboutUs}</span>
       </a>
       <a
-        class:list={{
-          hidden: true,
-          'items-center': true,
-          'hover:bg-muted': true,
-          'rounded-lg': true,
-          'p-3': true,
-          'lg:block': true,
-          'text-coral': Astro.url.pathname === getLocalePath('/mods'),
-        }}
-        data-active={Astro.url.pathname === getLocalePath('/mods')}
+        class:list={[
+          'hidden',
+          'items-center',
+          'hover:bg-muted',
+          'rounded-lg',
+          'p-3',
+          'lg:block',
+          { 'text-coral': Astro.url.pathname === getLocalePath('/mods') },
+        ]}
         href={getLocalePath('/mods')}
       >
         <span>{menu.mods}</span>

From b2173fc07431f267a386daf26e6f5abd1a4370ff Mon Sep 17 00:00:00 2001
From: Vrezh Fedora <vrezhraiden@gmail.com>
Date: Sun, 22 Jun 2025 15:02:27 +0200
Subject: [PATCH 4/4] refactor: change class:list elements

---
 src/components/NavBar.astro | 18 ++++--------------
 1 file changed, 4 insertions(+), 14 deletions(-)

diff --git a/src/components/NavBar.astro b/src/components/NavBar.astro
index 11b3204..bbfdf2b 100644
--- a/src/components/NavBar.astro
+++ b/src/components/NavBar.astro
@@ -97,13 +97,8 @@ const {
       </Dropdown>
       <a
         class:list={[
-          'hidden',
-          'items-center',
-          'hover:bg-muted',
-          'rounded-lg',
-          'p-3',
-          'lg:block',
-          { 'text-coral': Astro.url.pathname === getLocalePath('/about') },
+          'items-center rounded-lg p-3 hover:bg-muted',
+          Astro.url.pathname === getLocalePath('/about') && 'text-coral',
         ]}
         href={getLocalePath('/about')}
       >
@@ -111,13 +106,8 @@ const {
       </a>
       <a
         class:list={[
-          'hidden',
-          'items-center',
-          'hover:bg-muted',
-          'rounded-lg',
-          'p-3',
-          'lg:block',
-          { 'text-coral': Astro.url.pathname === getLocalePath('/mods') },
+          'items-center rounded-lg p-3 hover:bg-muted',
+          Astro.url.pathname === getLocalePath('/mods') && 'text-coral',
         ]}
         href={getLocalePath('/mods')}
       >