comunes/todos-contra-el-fuego-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

bootstrap: navbar collapse jQuery -> React state (BS4->5 prep)

Browse source 
Bootstrap's jQuery collapse (`data-toggle="collapse"` in Navigation.js, plus the
per-NavItem `data-target=".navbar-collapse.show"` auto-close) disappears when we
drop `alexwine:bootstrap-4` for `bootstrap@5`. Replace it with a React `useState`
that toggles `.show`, and close the mobile menu via an onClick on the nav <ul>.

Works on the current BS4 CSS (`.collapse.show` is pure CSS; jQuery only added the
height animation) and removes one of the two jQuery/BS4 JS blockers to the CSS
swap (the home carousel is the other). Also drops the dead sr-only toggler button
that targeted a non-existent id. No CSS changes.
This commit is contained in:
vjrj 2026-07-21 23:04:02 +02:00
parent 6b6f02d92d
commit 8dead27d22
3 changed files with 57 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

16
PENDIENTE.md
View file

@ -68,11 +68,17 @@ React 19: el `<Blaze serverFacts>` de Status.js (`findDOMNode`), solo en `/statu
- **Salto Bootstrap 4→5 (CSS/JS) pendiente:** react-bootstrap ya está en v2 y
corre sobre el CSS Bootstrap 4 actual (`alexwine:bootstrap-4`) con un único
shim `.form-label` en `forms.scss`. El salto a Bootstrap 5 npm está diferido
porque el carrusel del home (`bootstrap-carousel-swipe`, jQuery/BS4) y el
collapse del navbar dependen del JS jQuery de BS4 (`data-toggle`, `data-slide`).
Al hacerlo: importar `bootstrap@5` SCSS+JS, reescribir el carrusel (BS5 trae
swipe nativo → quitar el plugin), `data-toggle`→`data-bs-toggle`,
`ml-auto`→`ms-auto`, revisar `new-age.scss`/`custom.scss`/`bootstrap-overrides.scss`.
porque el carrusel del home (`bootstrap-carousel-swipe`, jQuery/BS4) depende del
JS jQuery de BS4 (`data-slide`).
- ✅ **Collapse del navbar migrado a React** (`Navigation.js` + `NavItem.js`):
el `data-toggle="collapse"` jQuery se sustituyó por estado React (`useState`
que alterna `.show`); funciona ya sobre el CSS BS4 y no depende del JS jQuery.
*Verificar en staging el menú móvil (<lg): abrir/cerrar y cierre al pulsar un
enlace.* Un blocker jQuery menos.
- Falta: reescribir el carrusel (BS5 trae swipe nativo → quitar el plugin),
importar `bootstrap@5` SCSS+JS, `data-slide`→`data-bs-slide`,
`ml-auto`→`ms-auto`, `sr-only`→`visually-hidden`, revisar
`new-age.scss`/`custom.scss`/`bootstrap-overrides.scss`.
- **Limpieza menor:** migración 217 `// TODO remove falsepositives lowercase
collection`; `prerender.js` gating comentado; sección per-fire del sitemap
eliminada (era código muerto tras `firesMapEnabled=false`).