Navbar offcanvas component example

[crftwrk]

The new offcanvas is a stand-alone component, but it should be able to display collapsed navbar as well. Created a navbar example which shows menu <992px (class navbar-expand-lg) in offcanvas component instead of the top open default navbar. navbar-expand{-sm|-md|-lg|-xl|-xxl} class can be used to set the breakpoints.

Demo: https://examples.bootscore.me/bootstrap-offcanvas-navbar/

As recommended in #33531, I open a PR here. It is the first time I do that, so please be patient for mistakes.

The idea is to add offcanvas component inside the navbar, open collapsed navbar in offcanvas and resetting the offcanvas by css below the breakpoints. The default body.offcanvas-backdrop::before does not work in this case, because backdrop overlaps open offcanvas as well. Here a div inside the navbar is used to create a backdrop.

To get this work, a bit of JavaScript is used. I have not the skills to write pure JavaScript, so I did it with jQuery which is linked via CDN in the index.html.

In the other examples i do not see any link to bootstrap.min.css or bootstrap.bundle.min.js. So I am a bit confused how the other examples work. In this case, I linked both files via CDN in index.html as well.

[XhmikosR]

Thanks for the PR, but the jQuery solution is no go for v5. Also, please always make sure all tests pass before pushing.

[mdo]

Thanks for opening @craftwerkberlin! I'll take a look at this and see how I can best help. Totally understandable it's your first PR here, so don't stress about it :).

[crftwrk]

@XhmikosR Sorry, my mistake. Will never happen again.

@mdo Thank you for your patience to guide me through here.

However I removed all JavaScript and switched to pure CSS using Bootstrap's existing JavaScript. It works with all navbar-expand-* and offcanvas-* classes. Please check:

Demo: https://examples.bootscore.me/bootstrap-offcanvas-navbar/
Code: https://github.com/craftwerkberlin/bootstrap-offcanvas-navbar/

There should be an option to hide offcanvas on resize. In this case I placed the backdrop navbar-toggler::before to overlap the navbar but not the offcanvas. If I want to use other offcanvas on the site and toggle them >992px, the backdrop is not shown, because .navbar-toggler is set to display: none.

Maybe it's better to place backdrop to .navbar::before, so all offcanvas on this site can use it. But, if i open navbar offcanvas on iPad portrait and turn to landscape, the offcanvas closes, but backdrop is still there. If offcanvas closes on resize, then every offcanvas on the site can use the backdrop. Just an idea...

Here is my question:

Edit: See, lines are not displayed correctly

I had this to close on resize
// Hide offcanvas and backdrop on resize $(window).on('resize', function () { $('.offcanvas').offcanvas('hide'); });

In pure JavaScript
window.onresize = function () { // How to hide offcanvas here? }

I took a look to bootstrap.js, but I didn't figured out how to hide offcanvas. Is there a simple version like your provided .offcanvas('hide') there? This can be an option for example data-bs-resize="true" in offcanvas too?

[XhmikosR]

/CC @GeoSot in case we need to handle the resize case in core

[crftwrk]

Updated the example above to v5 stable.

1. It uses the new awesome default backdrop now
2. Added offcanvas-top example
3. Still searching for a jQuery-free solution to hide offcanvas on resize through the breakpoints

Is there any future plan to implement offcanvas in navbar in core? If so, I would change that in source code instead of using additional css and js.

[mdo]

Moving this over to #34273 :D. Getting close!