offcanvas | A multi-device layout pattern

I got the code below from the official bootstrap 5 demo and for the life of me, can't figure how to move the off-canvas menu from Left-to-Right. The documentation code to place the offcanvas-start and the demo code are completely different.

JSFiddle DEMO: https://jsfiddle.net/fn0vypzt/

HTML:

I need to display Login Popup aobve the toggle menu layer.
So, I changed z-index of the Popup, which is higher than the menu layer.
But, the Login Popup still displays under the menu layer.
Would you please let me know how to solve this problem?

This is their structure.
nav part is the Toggle menu layer, and div part is the Login Popup.

I'm trying to integrate the new offcanvas component of bootstrap 5 in my vue app. I have this code and after the app is build I'm tying to test it but I'm not able to see the offcanvas menu. I don't have loaded the js plugin to mantain my app light and I'm adding the show class using a variable that will bind the needed class. How I can fix it?

You might see it as a duplicate but let me assure you I have looked into several questions on stakeoverflow and was not able to find similar question.

I have implemented Bootstrap 5 offcanvas and there is a weird issue with it.

It works perfectly when you trigger a button (anchor/button) with text inside it. But the moment you put an image inside it or an icon svg. It stops working.

Here is my code:

Top Menu of my app

I'm trying my hardest to figure it out but some how my navbar that i made with bootsrap "I think" is not corresponding with my jQuery-ui. And I can't understand why. If some one the issues you will get dogma from Doge god. Cheers guys here is the code: HTML

I have a little problem with open one offcanvas from previous canvas. Generally I have canvas like this using bootstrap 5:

I'm using the offcanvas component (https://getbootstrap.com/docs/5.0/components/offcanvas/). However I was wondering if it is possible to prevent it from closing when I click outside the offcanvas window. I've managed to stop it from closing when I press ESC but theres no way (as far as the docs go) to prevent it from closing when I do a mouse click outside of the offcanvas. Does anyone have an idea?

EDIT: I managed to get it working halfway by listening for the hide.bs.offcanvas event and then using e.preventDefault(); However now I'm unable to close the offcanvas with its default close button because it will always cancel the hide event. Any ideas?

Hy guys

i'm setting up a page where there is a table which contains some meta data about a pdf file.

Ofcourse for user friendliness i want to give the user a preview of a stored file and i'd like to do that in an off-canvas.

my html file