ux: hamburger + slide-out side drawer (not a kebab popover)

Replace the <details>-based kebab popover with a proper Material-
style navigation drawer:

- Hamburger button (menu icon) at top-left.
- <aside> drawer slides in from the left via transform: translateX().
  width: min(85vw, 320px). Backdrop overlay behind it.
- Close paths: X button in the drawer header, backdrop click, Esc.
- Padding honours Android safe-area insets on all four sides.
- Model selector + label live inside the drawer; future per-app
  settings can move here too.
This commit is contained in:
João Pedro Battistella Nadas
2026-06-09 20:02:11 +02:00
parent bde042a459
commit 1fffe8b7e1
2 changed files with 108 additions and 27 deletions

View File

@@ -19,7 +19,7 @@ Versioning: [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
- "Translate" inline button replaced with a primary FAB using the `translate` Material Symbols icon, stacked directly under the camera FAB at the bottom-right corner (closest to the thumb on phones). The camera FAB is now the *secondary* in the stack, just above. Both 56 × 56 px, same accent fill. The translate FAB gains a pulsing-ring `busy` animation during a running translation; `goBtn.textContent` swap is gone (was meaningless for an icon-only button). `body` got `~9 rem` of bottom padding so content scrolls clear of the stack.
- FAB stack rides above the on-screen keyboard on mobile via `interactive-widget=resizes-content` in the viewport meta tag (handled by Chrome on Android).
- Layout: From / To dropdowns now occupy 2 columns at the top (was 3 columns including Model).
- Model selector moved into a kebab (⋮) menu in the top-left corner. Uses a native `<details>` element so toggle/keyboard-accessibility works without extra JS.
- Model selector moved into a slide-out side drawer (hamburger menu in the top-left). Drawer opens from the left with a backdrop, closes via the X button, backdrop click, or `Esc`. Honours Android safe-area insets.
- Default source language is now Dutch (was Auto-detect). Target stays English.
- Crop modal:
- No default crop box. User drags on the image to draw the region; falls back to full image if they confirm without drawing.