feat: add mobile-friendly navigation with drawer menu (#253)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: marco-souza <4452113+marco-souza@users.noreply.github.com>

Author: marco-souza

src/components/Header.astro

@@ -1,6 +1,7 @@
 ---
 import { getRelativeLocaleUrl } from 'astro:i18n';
 import Logo from '@/components/Logo.astro';
+import MobileMenu from '@/components/MobileMenu.astro';
 import { getLangFromUrl, useTranslations } from '@/i18n/utils';
 
 const lang = getLangFromUrl(Astro.url);
@@ -26,33 +27,53 @@ const ctaLinks = {
     class="mx-auto flex w-full max-w-5xl flex-wrap items-center justify-between gap-3 rounded-lg bg-base-100/80 px-4 py-2 shadow-md backdrop-blur-sm"
     aria-label="Primary"
   >
-    <div class="flex min-w-0 flex-1 flex-wrap items-center gap-2 lg:gap-4">
-      <Logo size="nav" showTitle />
-      <ul class="menu menu-horizontal flex flex-1 flex-wrap justify-center gap-0 px-0 sm:justify-start lg:gap-1">
-        {
-          navigationLinks.map((link) => (
-            <li>
-              <a
-                class:list={[
-                  'btn btn-xs btn-ghost',
-                  link.href === pathname && 'btn-outline btn-primary',
-                ]}
-                href={link.href}
-              >
-                {link.label}
-              </a>
-            </li>
-          ))
-        }
-      </ul>
+    <!-- Mobile: Logo + Hamburger in a flex row -->
+    <div class="flex w-full items-center justify-between lg:hidden">
+      <div class="flex items-center gap-2">
+        <MobileMenu {navigationLinks} {ctaLinks} {pathname} />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <Logo size="nav" showTitle />
+      </div>
+
+      <div class="flex items-center gap-2">
+        <a href={ctaLinks.primary.href} class="btn btn-primary btn-sm">
+          {ctaLinks.primary.label}
+        </a>
+      </div>
     </div>
-    <div class="flex items-center gap-1 sm:gap-2">
-      <a href={ctaLinks.secondary.href} class="btn btn-ghost btn-sm">
-        {ctaLinks.secondary.label}
-      </a>
-      <a href={ctaLinks.primary.href} class="btn btn-primary btn-sm">
-        {ctaLinks.primary.label}
-      </a>
+
+    <!-- Desktop: Original layout (Logo + Nav left, CTAs right) -->
+    <div class="hidden w-full lg:flex lg:items-center lg:justify-between">
+      <div class="flex min-w-0 flex-1 flex-wrap gap-2 lg:gap-4">
+        <Logo size="nav" showTitle />
+        <ul class="menu menu-horizontal flex flex-1 flex-wrap gap-0 px-0 lg:gap-1">
+          {
+            navigationLinks.map((link) => (
+              <li>
+                <a
+                  class:list={[
+                    'btn btn-xs btn-ghost',
+                    link.href === pathname && 'btn-outline btn-primary',
+                  ]}
+                  href={link.href}
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+      <div class="flex items-center gap-1 sm:gap-2">
+        <a href={ctaLinks.secondary.href} class="btn btn-ghost btn-sm">
+          {ctaLinks.secondary.label}
+        </a>
+        <a href={ctaLinks.primary.href} class="btn btn-primary btn-sm">
+          {ctaLinks.primary.label}
+        </a>
+      </div>
     </div>
   </nav>
 </header>

src/components/MobileMenu.astro

@@ -0,0 +1,86 @@
+---
+import { Icon } from 'astro-icon/components';
+import Logo from '@/components/Logo.astro';
+import { getLangFromUrl, useTranslations } from '@/i18n/utils';
+
+interface Props {
+  navigationLinks: Array<{ href: string; label: string }>;
+  ctaLinks: {
+    secondary: { href: string; label: string };
+    primary: { href: string; label: string };
+  };
+  pathname: string;
+}
+
+const { navigationLinks, ctaLinks, pathname } = Astro.props;
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+---
+
+<div class="drawer drawer-start lg:hidden">
+  <input id="mobile-menu-drawer" type="checkbox" class="drawer-toggle" />
+
+  <!-- Hamburger button -->
+  <div class="drawer-content">
+    <label
+      for="mobile-menu-drawer"
+      class="btn btn-ghost btn-sm drawer-button"
+      aria-label={t('nav.menu')}
+    >
+      <Icon name="lucide:menu" class="h-5 w-5" />
+    </label>
+  </div>
+
+  <!-- Drawer side panel -->
+  <div class="drawer-side fixed z-50 m-[-1rem] w-screen">
+    <label
+      for="mobile-menu-drawer"
+      aria-label="close sidebar"
+      class="drawer-overlay w-full"
+    ></label>
+    <div class="flex h-full w-[80vw] max-w-sm flex-col bg-base-100 p-4">
+      <!-- Top: Logo + Navigation links -->
+      <div class="flex flex-col gap-4">
+        <div class="flex items-center gap-2">
+          <Logo size="nav" showTitle />
+        </div>
+        <ul class="menu w-full gap-1 p-0">
+          {
+            navigationLinks.map((link) => (
+              <li>
+                <a
+                  class:list={[
+                    'btn btn-ghost btn-sm w-full justify-start',
+                    link.href === pathname && 'btn-outline btn-primary',
+                  ]}
+                  href={link.href}
+                >
+                  {link.label}
+                </a>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+
+      <!-- Center: empty space (flex-1 pushes content apart) -->
+      <div class="flex-1"></div>
+
+      <!-- Bottom: CTAs -->
+      <div class="flex flex-col gap-2">
+        <a
+          href={ctaLinks.secondary.href}
+          class="btn btn-ghost btn-sm w-full"
+        >
+          {ctaLinks.secondary.label}
+        </a>
+        <a
+          href={ctaLinks.primary.href}
+          class="btn btn-primary btn-sm w-full"
+        >
+          {ctaLinks.primary.label}
+        </a>
+      </div>
+    </div>
+  </div>
+</div>

src/components/marketing/ActivityGrid.astro

@@ -1,4 +1,5 @@
 ---
+import { Icon } from 'astro-icon/components';
 import type { Activity } from '@/data/marketing';
 
 interface Props {
@@ -7,17 +8,13 @@ interface Props {
 
 const { items } = Astro.props;
 
-/** Heroicons 24 outline: interview, career, group, terminal, calendar */
-const icons: Record<Activity['icon'], string> = {
-  interview:
-    'M20.25 8.511c.884.284 1.5 1.128 1.5 2.097v4.286c0 1.136-.847 2.1-1.98 2.193-.34.027-.68.052-1.02.072v3.091l-3-3c-1.354 0-2.694-.055-4.02-.163a2.115 2.115 0 01-.825-.242m9.345-8.334a2.126 2.126 0 00-.476-.095 48.64 48.64 0 00-8.048 0c-1.131.094-1.976 1.057-1.976 2.192v4.286c0 .837.46 1.58 1.155 1.951m9.345-8.334V6.637c0-1.621-1.152-3.026-2.76-3.235A48.455 48.455 0 0011.25 3c-2.115 0-4.198.137-6.24.402-1.608.209-2.76 1.614-2.76 3.235v6.226c0 1.621 1.152 3.026 2.76 3.235.577.075 1.157.14 1.74.194V21l4.155-4.155',
-  career:
-    'M20.25 14.15v4.25c0 1.094-.787 2.036-1.872 2.18-2.087.277-4.216.42-6.378.42s-4.291-.143-6.378-.42c-1.085-.144-1.872-1.086-1.872-2.18v-4.25m16.5 0a2.18 2.18 0 00.75-1.661V8.706c0-1.081-.768-2.015-1.837-2.175a48.114 48.114 0 00-3.413-.387m4.5 8.006c-.194.165-.42.295-.673.38A23.978 23.978 0 0112 15.75c-2.648 0-5.195-.429-7.577-1.22a2.016 2.016 0 01-.673-.38m0 0A2.18 2.18 0 013 12.489V8.706c0-1.081.768-2.015 1.837-2.175a48.111 48.111 0 013.413-.387m7.5 0V5.25A2.25 2.25 0 0013.5 3h-3a2.25 2.25 0 00-2.25 2.25v.894m7.5 0a48.667 48.667 0 00-7.5 0M12 12.75h.008v.008H12v-.008Z',
-  groups:
-    'M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0Zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0Zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0Z',
-  project:
-    'm6.75 7.5 3 2.25-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25Z',
-  cafe: 'M6.75 3v2.25M17.25 3v2.25M3 18.75V7.5a2.25 2.25 0 0 1 2.25-2.25h13.5A2.25 2.25 0 0 1 21 7.5v11.25m-18 0A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75m-18 0v-7.5A2.25 2.25 0 0 1 5.25 9h13.5A2.25 2.25 0 0 1 21 11.25v7.5',
+/** Iconify icon names for activity items */
+const iconMap: Record<Activity['icon'], string> = {
+  interview: 'lucide:mic',
+  career: 'lucide:briefcase',
+  groups: 'lucide:users',
+  project: 'lucide:terminal',
+  cafe: 'lucide:coffee',
 };
 ---
 
@@ -30,9 +27,7 @@ const icons: Record<Activity['icon'], string> = {
             class="bg-primary/15 text-primary inline-flex h-12 w-12 items-center justify-center rounded-xl"
             aria-hidden="true"
           >
-            <svg class="h-7 w-7" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
-              <path stroke-linecap="round" stroke-linejoin="round" d={icons[item.icon]} />
-            </svg>
+            <Icon name={iconMap[item.icon]} class="h-7 w-7" />
           </div>
           <h3 class="card-title text-xl">{item.title}</h3>
           <p class="text-base-content/80 text-sm leading-relaxed">{item.description}</p>

src/i18n/ui.ts

@@ -9,6 +9,8 @@ export const ui = {
     'nav.contributing': 'Como posso ajudar?',
     'nav.join_us': 'Faça parte!',
     'nav.transparency': 'Transparência',
+    'nav.menu': 'Menu',
+    'nav.close_menu': 'Fechar menu',
     'footer.copyright': 'Todos os direitos reservados.',
     // Transparency page
     'transparency.title': 'Transparência',