Skip to content

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

Merged
marco-souza merged 9 commits intomainfrom
feat/mobile-friendly-navigation
Apr 26, 2026
Merged

feat: add mobile-friendly navigation with drawer menu#253
marco-souza merged 9 commits intomainfrom
feat/mobile-friendly-navigation

Conversation

@marco-souza
Copy link
Copy Markdown
Contributor

Summary

Implements mobile-friendly navigation for PodCodar 2026 Rebranding as specified in issue #252.

Changes

  • New MobileMenu.astro component: Uses DaisyUI v5 drawer component (pure CSS, no JavaScript)
  • Refactored Header.astro: Responsive layout with mobile/desktop breakpoints
  • i18n keys: Added nav.menu and nav.close_menu for accessibility labels

Mobile Layout (small screens)

  • Left: Hamburger menu button
  • Center: PodCodar logo
  • Right: Primary CTA button ("Faça parte!")

Drawer Behavior

When hamburger is clicked, a drawer slides in from the left:

  • Top: Logo + navigation links (Home, Blog, About, Transparency, Contact)
  • Center: Empty space (flex-1)
  • Bottom: Secondary CTA ("Como posso ajudar?") + Primary CTA ("Faça parte!")
  • Width: 80% of screen width (max 28rem)

Desktop Layout (lg+ screens)

  • Original horizontal navigation preserved
  • Hamburger menu hidden
  • Both CTA buttons visible

Technical Details

  • Uses DaisyUI v5 drawer component (CSS-only, no JS island needed)
  • Fully accessible with ARIA labels
  • Closes automatically when clicking overlay or navigation links
  • All existing E2E tests pass

Closes #252

@github-actions
Copy link
Copy Markdown
Contributor

✅ Playwright E2E — All tests passed

Detail Link
Workflow run View run
HTML report Download the playwright-report artifact from the run page above
Traces & videos Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

  1. Download and unzip the playwright-report artifact.
  2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

@github-actions
Copy link
Copy Markdown
Contributor

✅ Playwright E2E — All tests passed

Detail Link
Workflow run View run
HTML report Download the playwright-report artifact from the run page above
Traces & videos Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

  1. Download and unzip the playwright-report artifact.
  2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

- Add MobileMenu component with DaisyUI drawer (80% width)
- Refactor Header.astro for responsive layout:
  - Mobile (<1024px): Logo left, Hamburger+CTA right in a flex row
  - Desktop (1024px+): Original layout preserved (Logo+Nav left, CTAs right)
- Drawer contains: logo + nav links (top), empty space (center), CTAs (bottom)
- Add i18n keys for menu labels
- Pure CSS implementation using DaisyUI drawer

Closes #252
@marco-souza marco-souza force-pushed the feat/mobile-friendly-navigation branch from c542979 to 92ad94e Compare April 26, 2026 11:02
@github-actions
Copy link
Copy Markdown
Contributor

✅ Playwright E2E — All tests passed

Detail Link
Workflow run View run
HTML report Download the playwright-report artifact from the run page above
Traces & videos Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

  1. Download and unzip the playwright-report artifact.
  2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

@github-actions
Copy link
Copy Markdown
Contributor

✅ Playwright E2E — All tests passed

Detail Link
Workflow run View run
HTML report Download the playwright-report artifact from the run page above
Traces & videos Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

  1. Download and unzip the playwright-report artifact.
  2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

@github-actions
Copy link
Copy Markdown
Contributor

✅ Playwright E2E — All tests passed

Detail Link
Workflow run View run
HTML report Download the playwright-report artifact from the run page above
Traces & videos Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

  1. Download and unzip the playwright-report artifact.
  2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

Copy link
Copy Markdown
Contributor Author

@marco-souza marco-souza left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@github-actions
Copy link
Copy Markdown
Contributor

✅ Playwright E2E — All tests passed

Detail Link
Workflow run View run
HTML report Download the playwright-report artifact from the run page above
Traces & videos Download the playwright-results artifact (attached when tests fail)

How to view the HTML report locally:

  1. Download and unzip the playwright-report artifact.
  2. Run bunx playwright show-report <path-to-report> to open it in your browser.

Traces and videos are captured on first retry (failures only).

@marco-souza marco-souza merged commit 4f4aba6 into main Apr 26, 2026
2 checks passed
@marco-souza marco-souza deleted the feat/mobile-friendly-navigation branch April 26, 2026 12:28
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Mobile friendly

2 participants