Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Marketing pages offer no language or theme switch below 768px

Open
  • Is something wrong?
#1,778 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
63/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
tailwindcss, typescript
Domain
accessibility, frontend

Research direction

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/.

Written by the indexing model from the issue text.

Description

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.

Dominant language
TypeScript
Stars
119
Forks
19
Avg merge
1d 2h
Merged PRs (30d)
56

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from DouglasNeuroInformatics/OpenDataCapture

All issues in DouglasNeuroInformatics/OpenDataCapture

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.