Add organism switch button to navigation submenu

[theosanderson]

Adds a button to help people confused about how to switch organism to find the organism menu.

The rationale for this somewhat odd design is that it's confusing to have two totally different UI elements to do the same thing as part of the main UI, but it's also confusing that people expect there to be a way to change organism from the left hand UI and that they can't atm.

Because the elements are in Astro not React the code is a bit different to our normal style, and generally it probably looks quite hacky. In my view it's basically fine though.

Discussion in https://loculus.slack.com/archives/C061ZQQM3N1/p1775646115881829

🚀 Preview: https://claude-organism-menu-butt.loculus.org

[theosanderson]

@theosanderson-agent fix types and format

[theosanderson-agent]

Types are clean (tsc --noEmit and astro check both pass with no errors). Fixed one Prettier formatting issue in OrganismSubmenu.astro (expanded an arrow function body onto multiple lines). Pushed in 1b6235f.

[theosanderson]

@theosanderson-agent get format passing

[theosanderson]

@theosanderson-agent can we get the color from colors.json instead?

[theosanderson-agent]

Fixed the Prettier formatting issue in OrganismSubmenu.astro — it was an indentation mismatch inside the <span> block.

[theosanderson-agent]

Done — now importing mainTailwindColor from colors.json in the Astro frontmatter and passing the [400] shade (which matches primary.DEFAULT in the Tailwind config) to the script via a data-primary-color attribute on the button. This replaces the DOM probe approach that was creating a temporary element to read the computed style. Pushed to the branch.

[theosanderson]

@theosanderson-agent fix format and types and format

[theosanderson-agent]

Fixed: ESLint flagged an import order issue in OrganismSubmenu.astro (the colors.json import needed to be sorted before the local type imports). No type errors or test failures — all 622 tests pass.

[claude]

Claude finished @theosanderson's task in 1m 45s —— View job

---

Code Review

• Gather context
• Read changed files
• Provide review feedback

---

The implementation is clean and the approach makes sense — using a vanilla JS script in the Astro component to bridge to either the React desktop menu or the mobile sandwich menu is pragmatic given the mixed rendering context.

Specific comments are left inline; summary of the two points:

1. querySelector single-match — document.querySelector('[data-organism-switch-button]') only wires up the first button. Fine for the current page layout (at most one organism nav rendered at a time), but fragile if that assumption changes.

2. Rapid-click race — multiple quick clicks each start independent animation loops and each eventually call menuButton.click(), which can toggle the menu closed again. An isAnimating guard would fix this.

The rest looks good:

• useOffCanvas.open is a stable useCallback ref, so the new useEffect in SandwichMenu won't re-register the listener on every render.
• Ghost elements are cleaned up via setTimeout and the main wrapper is removed in the animation's final frame — no leaks.
• primaryColor is read from colors.json at build time, not user input, so injecting it into cssText is safe.
• The eslint-disable-next-line no-restricted-syntax comment correctly documents why a native <button> is used here instead of the app's Button wrapper (Astro SSR, no React hydration).
• The mobile fallback via window.dispatchEvent(new Event('open-sandwich-menu')) is tidy and the cleanup in useEffect is correct.