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

Author: Raiden0456

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

@@ -31,8 +31,15 @@ const {
     <div
       class="hidden items-center gap-6 place-self-center text-xs sm:text-sm lg:flex lg:text-base"
     >
+      <a
+        class={`hidden items-center hover:bg-muted rounded-lg p-3 lg:block${Astro.url.pathname === getLocalePath('/') ? ' text-coral' : ''}`}
+        href={getLocalePath('/')}
+      >
+        <span>{menu.home}</span>
+      </a>
+
       <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 +73,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 +87,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 +102,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 +145,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 +168,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 and when toggles are shown
+  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

@@ -489,6 +489,7 @@
     "nav": {
       "brand": "Zen Browser",
       "menu": {
+        "home": "Home",
         "gettingStarted": "Getting Started",
         "usefulLinks": "Useful Links",
         "mods": "Mods",
@@ -502,7 +503,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

@@ -494,6 +494,7 @@
     "nav": {
       "brand": "Zenブラウザー",
       "menu": {
+        "home": "ホーム",
         "gettingStarted": "はじめに",
         "usefulLinks": "便利なリンク",
         "mods": "Mods",
@@ -507,7 +508,7 @@
         "discordDesc": "Discordコミュニティで他のZenユーザーと交流！",
         "donate": "寄付 ❤️",
         "donateDesc": "Zen開発を寄付で応援。",
-        "aboutUs": "私たちについて 🌟",
+        "aboutUs": "私たちについて",
         "aboutUsDesc": "Zenのチームについて知る。",
         "documentation": "ドキュメント",
         "documentationDesc": "ドキュメントでZenの使い方を学ぶ。",