Problem/Motivation

We are using jasny/bootstrap offcanvas (custom port to Bootstrap 4.x) for offcanvas navigation. That is not ideal. Also official jasny/bootstrap is slow to port to Bootstrap 4.

Proposed resolution

  • Bootstrap 5 has a built-in support for offcanvas component, https://getbootstrap.com/docs/5.0/components/offcanvas/. This is what we will use.
  • This issue will be done for 2.x branch so no need to implement compatibility with 1.x version
  • bs_bootstrap/js/navbar.js will need to be update to work with this.
  • Consider moving to bs_lib because this is more a library thing?

Issue fork bs_base-3008293

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

pivica created an issue. See original summary.

pivica’s picture

pivica commented

Jasny Bootstrap released Bootstrap 4 compatible version https://github.com/jasny/bootstrap/releases/tag/v4.0.0.

pivica’s picture

pivica commented
Issue summary: View changes
Parent issue: #3008284: [META] alpha5 release issues (8.x-1.0-alpha5) »
pivica’s picture

pivica commented
Issue summary: View changes
pivica’s picture

pivica commented

Related bs_lib jQuery issue #3107481: Try to remove jQuery dependency.

pivica’s picture

pivica commented
Version: 8.x-1.x-dev » 2.x-dev
Issue summary: View changes

Moving to 2.x version. Bootstrap 5 now has built-in support for offset component (https://getbootstrap.com/docs/5.0/components/offcanvas/), we will use this instead of any custom JS solution. Updated issue description with new info.

pivica’s picture

pivica commented
Title: Consider changing jasny bootstrap offcanvas solution with custom one » Remove custom jasny bootstrap offcanvas solution and use BS5 offcanvas compoment

pivica opened merge request !28

pivica’s picture

pivica commented
Version: 2.x-dev » 2.0.x-dev
Status: Active » Needs review

Pushed MR, here is a list of changes:

Configuration

- Replaced navbar_offcanvas.type + navbar_offcanvas.position with single navbar_responsive_type setting
- New values: collapse, offcanvas-start, offcanvas-end, off

Theme Preprocessing (bs_base.theme)

- New navbar_attributes variable with navbar-expand-ncrb class for responsive behavior
- New is_offcanvas and navbar_responsive_type template variables
- Simplified bs_lib_toggle_button preprocess (removed Jasny-specific attributes)

Templates

- region--navbar.html.twig: New offcanvas_header block with Bootstrap 5 btn-close, offcanvas-body wrapper
- page.html.twig: Uses navbar_attributes instead of hardcoded classes
- menu--navbar.html.twig: Removed deprecated offcanvas-specific markup

JavaScript (navbar.js)

- Refactored to vanilla JS where practical
- Updated to Bootstrap 5 Offcanvas API
- Renamed isNavbarCollapseShow to isLinkNavbarResponsiveShow
- Fixed multi-level dropdown support in responsive navbar

SASS/CSS

- Removed navigation.css (split into nav.scss and navbar.scss) - this is actually from before, i forgot to compile... so it is going here.
- New offcanvas.scss with Bootstrap 5 responsive offcanvas styles
- Custom navbar-expand-ncrb and offcanvas-ncrb breakpoint classes

Update Hook (bs_base_bs_update_200007)

Trying to help in migration:
- Auto-migrates old config to new format
- Warns about deprecated CSS classes and JS patterns
- Auto-renames isNavbarCollapseShow in child theme JS files

pivica’s picture

pivica commented
Title: Remove custom jasny bootstrap offcanvas solution and use BS5 offcanvas compoment » Remove custom jasny bootstrap offcanvas solution and use BS5 offcanvas component

  • pivica committed 515b57d2 on 2.0.x 
    feat: #3008293 Remove custom jasny bootstrap offcanvas solution and use...
pivica’s picture

pivica commented
Status: Needs review » Fixed

Done.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.