From 265f660443bd89912fb881b38a9880eeb9362177 Mon Sep 17 00:00:00 2001
From: Michael <87752300+michi-onl@users.noreply.github.com>
Date: Thu, 31 Jul 2025 17:38:05 +0200
Subject: [PATCH] feat: enhance mobile menu with structured links and download
 button

---
 src/components/MobileMenu.astro | 123 +++++++++++++++-----------------
 1 file changed, 59 insertions(+), 64 deletions(-)

diff --git a/src/components/MobileMenu.astro b/src/components/MobileMenu.astro
index 8efb4d15..10492745 100644
--- a/src/components/MobileMenu.astro
+++ b/src/components/MobileMenu.astro
@@ -1,4 +1,6 @@
 ---
+import Button from '~/components/Button.astro'
+import ArrowRightIcon from '~/icons/ArrowRightIcon.astro'
 import { getLocale, getPath, getUI } from '~/utils/i18n'
 
 const locale = getLocale(Astro)
@@ -8,6 +10,26 @@ const {
     nav: { menu },
   },
 } = getUI(locale)
+
+const menuItems = [
+  {
+    section: menu.gettingStarted,
+    links: [
+      { href: getLocalePath('/mods'), text: menu.zenMods },
+      { href: getLocalePath('/release-notes'), text: menu.releaseNotes },
+      { href: 'https://discord.gg/zen-browser', text: menu.discord },
+    ],
+  },
+  {
+    section: menu.usefulLinks,
+    links: [
+      { href: getLocalePath('/donate'), text: menu.donate },
+      { href: getLocalePath('/about'), text: menu.aboutUs },
+      { href: 'https://docs.zen-browser.app', text: menu.documentation },
+      { href: 'https://github.com/zen-browser', text: menu.github, target: '_blank' },
+    ],
+  },
+]
 ---
 
 <!-- Hidden checkbox for menu toggle -->
@@ -18,14 +40,14 @@ const {
   id="mobile-menu"
   class="fixed inset-y-0 right-0 z-40 w-64 translate-x-full transform bg-paper shadow-lg transition-transform duration-300 peer-checked:translate-x-0 lg:hidden"
 >
-  <div class="flex items-center justify-between border-b border-dark px-4 py-2">
-    <div class="text-lg font-bold">{menu.menu}</div>
+  <div class="flex items-center justify-between border-b border-dark px-6 py-4">
+    <div class="text-lg font-bold tracking-tight">{menu.menu}</div>
     {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-    <label for="mobile-menu-toggle" class="cursor-pointer p-2 text-dark">
+    <label for="mobile-menu-toggle" class="-mr-3 cursor-pointer p-3 text-dark">
       <span class="sr-only">Close menu</span>
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-6 w-6"
+        class="h-5 w-5"
         fill="none"
         viewBox="0 0 24 24"
         stroke="currentColor"
@@ -39,67 +61,40 @@ const {
       </svg>
     </label>
   </div>
-  <nav class="px-4 py-2">
-    <ul class="space-y-4">
-      <!-- Getting Started Links -->
-      <li>
-        <div class="mb-2 font-bold">{menu.gettingStarted}</div>
-        <ul class="ml-4 space-y-2">
-          <li>
-            <a href={getLocalePath('/mods')} class="block text-dark hover:text-coral"
-              >{menu.zenMods}</a
-            >
-          </li>
-          <li>
-            <a href={getLocalePath('/release-notes')} class="block text-dark hover:text-coral"
-              >{menu.releaseNotes}</a
-            >
-          </li>
-          <li>
-            <a href="https://discord.gg/zen-browser" class="block text-dark hover:text-coral"
-              >{menu.discord}</a
-            >
-          </li>
-        </ul>
-      </li>
-      <!-- Useful Links -->
-      <li>
-        <div class="mb-2 font-bold">{menu.usefulLinks}</div>
-        <ul class="ml-4 space-y-2">
-          <li>
-            <a href={getLocalePath('/donate')} class="block text-dark hover:text-coral"
-              >{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
-            >
-          </li>
-          <li>
-            <a
-              href="https://github.com/zen-browser"
-              target="_blank"
-              class="block text-dark hover:text-coral">{menu.github}</a
-            >
+
+  <nav class="px-6 py-6">
+    <ul>
+      {
+        menuItems.map((section, index) => (
+          <li class={index > 0 ? 'pt-6' : ''}>
+            <div class="mb-2 text-sm font-semibold uppercase tracking-wider opacity-65">
+              {section.section}
+            </div>
+            <ul class="space-y-2">
+              {section.links.map(link => (
+                <li>
+                  <a
+                    href={link.href}
+                    {...(link.target && { target: link.target })}
+                    class="block text-lg font-medium text-dark hover:text-coral"
+                  >
+                    {link.text}
+                  </a>
+                </li>
+              ))}
+            </ul>
           </li>
-        </ul>
-      </li>
-      <!-- Extra Links -->
-      <li>
-        <a href={getLocalePath('/mods')} class="block font-bold text-dark hover:text-coral"
-          >{menu.mods}</a
-        >
-      </li>
-      <li>
-        <a href={getLocalePath('/download')} class="block font-bold text-dark hover:text-coral"
-          >{menu.download}</a
-        >
+        ))
+      }
+
+      <!-- Download Button -->
+      <li class="pt-6">
+        <Button href={getLocalePath('/download')} isPrimary>
+          <span class="flex items-center gap-2 text-lg">
+            {menu.download}
+            <ArrowRightIcon class="size-5" />
+          </span>
+        </Button>
       </li>
     </ul>
   </nav>