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

6
imports/ui/components/NavItem/NavItem.js
View file

@ -4,7 +4,9 @@ import PropTypes from 'prop-types';
// Self-contained NavItem. The old one wrapped react-bootstrap 0.31's
// `SafeAnchor` + `createChainedFunction` (both gone in v2); the markup this
// navbar needs is just an <li><a> that toggles the collapsed menu on click.
// navbar needs is just an <li><a>. The mobile menu is now collapsed from React
// state in Navigation (the parent <ul onClick>), so the old jQuery
// `data-toggle="collapse"` / `data-target` hooks were dropped here.
const propTypes = {
active: PropTypes.bool,
disabled: PropTypes.bool,
@ -57,8 +59,6 @@ class NavItem extends React.Component {
return (
<li
role="presentation"
data-toggle="collapse"
data-target=".navbar-collapse.show"
className={classNames(className, { active, disabled })}
style={style}
>