Move About Us and Home to main nav, add dropdown animation and some colors

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

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

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

src/i18n/en/translation.json

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

src/i18n/ja/translation.json

@@ -511,7 +511,7 @@
         "discordDesc": "Discordコミュニティで他のZenユーザーと交流！",
         "donate": "寄付 ❤️",
         "donateDesc": "Zen開発を寄付で応援。",
-        "aboutUs": "私たちについて 🌟",
+        "aboutUs": "私たちについて",
         "aboutUsDesc": "Zenのチームについて知る。",
         "documentation": "ドキュメント",
         "documentationDesc": "ドキュメントでZenの使い方を学ぶ。",