Reactstrap 5.x Dropdowns do not work correctly

[iaincollins]

They don't render correctly on mobile, and they don't work without JavaScript enabled on the client.

These are both issues with Reactstrap. The former is likely to be fixed in updates to Reactstrap 5.x alpha, but the latter will require additional work if we want to resolve that.

As the site supports universal rendering and sessions I'd like to resolve the issue with navigation.

[iaincollins]

The issue with dropdown menus in the navbar not rendering properly on mobile has been fixed with CSS.

.navbar .dropdown {
  display: block;
}

@media (max-width: 768px) {
  .navbar .dropdown-menu {
    position: relative !important;
    display: block !important;
    transform: none !important;
    padding: 0 0 10px 0;
    border: none;
  }
}

The main menu navbar no longer requires JavaScript using input checkboxes combined with CSS, but this has not been extended to other dropdown menus yet.

<label for="navbar-menu-toggle" className="d-block d-md-none">
  <span className="icon ion-md-menu p-2" style={{fontSize: '1.5em'}}></span>
</label>
<input type="checkbox" id="navbar-menu-toggle" className="nojs-dropdown-toggle" aria-label="Menu"/>
<div className="nojs-dropdown-content">
  …
</div>

.nojs-dropdown-content {
  width: 100%;
}
.nojs-dropdown-toggle {
  display: none;
}
@media (max-width: 767px) {
  .nojs-dropdown-content {
     display: none;
  }
  .nojs-dropdown-toggle:checked + .nojs-dropdown-content {
    display: block;
  }
}