Hacktoberfest 2026: le issue che i maintainer hanno segnato per ottobre, aperte e adatte ai principianti. Sfoglia le issue Hacktoberfest

Marketing pages offer no language or theme switch below 768px

Aperta
  • Qualcosa non va?
#1,778 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
3/5
Tempo stimato
1-2 giorni
Idoneità per principianti
63/100
Tipo di issue
Bug
Chiarezza
Specificata chiaramente
Stato di attività
Attiva
Stack tecnologico
tailwindcss, typescript
Ambito
accessibility, frontend

Direzione di ricerca

Start in apps/outreach/src/components/layout/Header.astro, comparing the desktop toggle container at lines 43–52 with the mobile panel at lines 80–83. Read the toggle components and their scripts to understand how their fixed IDs are bound; the issue notes that duplicate instances may need class or data-attribute binding. With no automated suite, manually check at 390px that the opened menu shows both controls and choosing “FR” navigates to /fr/.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

Area: Outreach Bug Difficulty: Low Priority: Medium

Below 768px, the marketing pages give no way to switch language or theme. The header puts the nav links, ThemeToggle and LanguageToggle together in one hidden md:flex container. On a phone the hamburger opens the mobile-slider panel, which renders only the nav links. The footer has no language link either. A French-speaking visitor who lands on /en/ from a phone cannot reach /fr/ without editing the URL. A visitor whose system theme is wrong for them cannot change it. At 390px wide, both toggles measure 0×0 and the open menu lists only Accueil, L'équipe, Blogue, Docs and FAQ.

Where

apps/outreach/src/components/layout/Header.astro:43-52, the only place the toggles render:

<div class="hidden shrink md:flex">
  <nav class="flex gap-3 overflow-hidden duration-300" id="nav-dropdown">
    {navLinks.map((props) => <NavLink {...props} />)}
  </nav>
  <div class="mx-5 h-8 w-px rounded-md bg-slate-300 dark:bg-slate-700"></div>
  <div class="flex grow justify-end gap-3">
    <ThemeToggle />
    <LanguageToggle />
  </div>
</div>

apps/outreach/src/components/layout/Header.astro:80-83, the mobile panel:

<hr class="mx-4 my-4 border-slate-300 dark:border-slate-700" />
<nav class="flex flex-col px-4">
  {navLinks.map((props) => <NavLink {...props} />)}
</nav>

Reproduce

  1. Open https://opendatacapture.org/en/ on a phone, or in devtools at 390×844.
  2. Look for the language and theme controls in the header, then open the menu.

Actual: there is no language or theme control in the header, the menu or the footer.
Expected: the mobile menu offers the same language and theme switches as the desktop header.

Tests

apps/outreach has no unit or Playwright suite, by decision (apps/outreach/AGENTS.md). Check manually at 390px wide that the opened menu shows both controls, and that choosing "FR" goes to /fr/.

Suggested fix

Render ThemeToggle and LanguageToggle inside #mobile-slider below the nav. Both components look themselves up by a fixed element id (theme-toggle, language-toggle, language-toggle-dropdown), so a second instance needs those scripts to bind by class or data- attribute instead. For the language switch, plain links to the two locales are enough in the mobile panel.

Lingua principale
TypeScript
Stelle
119
Fork
19
Merge medio
1g 2h
PR unite (30g)
56

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di DouglasNeuroInformatics/OpenDataCapture

Tutte le issue di DouglasNeuroInformatics/OpenDataCapture

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.