Hide the offcanvas on mobile back

[Jehong-Ahn]

Like other mobile apps.

[mdo]

Thoughts on this @GeoSot? Maybe this is more of an example in our docs vs specific functionality we need to build?

[GeoSot]

@Jehong-Ahn can you be more explicit, to help me understand the idea?

(I suppose you suggest handling the swipe over offcanvas and close it on user gesture, but I am not sure if I have understood correct)

[Jehong-Ahn]

Sorry for bad english.

On my second thought this seems about android.

Android users expect the offcanvas get closed when he touch the device back button.

Some articles

• 4 Design Patterns That Violate “Back” Button UX Expectations – 59% of Sites Get It Wrong – Articles – Baymard Institute
• Design with the web in mind. Back button, URL design, keyboard… | by Chloe Sanderson | UX Collective

Some plugins

• Back button add-on - mmenu.js documentation

My demo

if ( navigator.userAgentData.mobile && navigator.userAgent.match(/Android/) ) {

  const $el = window['offcanvas-navbar'];

  $el.addEventListener('shown.bs.offcanvas', () => location.hash = '#offcanvas');
  
  $el.addEventListener('hidden.bs.offcanvas', () => location.hash==='#offcanvas' && history.back());
  
  window.onhashchange = event => {
    if ( event.oldURL.substr(-10) === '#offcanvas' ) bootstrap.Offcanvas.getInstance($el).hide();
  };

}

[Jehong-Ahn]

@GeoSot Read my comment pls.

[GeoSot]

Sorry for late response.
I have your message in my mind, and yes I agree with you, as it is the right user experience .

I 'll try to think how could be implemented it on 5.3

[Jehong-Ahn]

@GeoSot thanks 🤓

[GeoSot]

Keep in mind this PR #36648