Push the main content when off canvas is visible

[ben]

To answer a question from @johnny.hajjar, to move the main content we need to add some JavaScript and style rules.

Due to time constraints, I will bypass the Wappler method (sorry @George)

1. First add the style rules:

.offcanvas {
    width: 250px; /*adjust as required*/
}

#main {
    transition: margin-left .5s; /*sliding effect*/
}

2. Next add the JavaScript to the bottom of the document:

function closedSidebar() {
    document.getElementById("main").style.cssText = "margin: 0; width: 100%;";
}
function openedSidebar() {
    const mediaQuery = window.matchMedia('(min-width: 768px)')
    if (mediaQuery.matches){
        document.getElementById("main").style.cssText = "margin: 0 0 0 250px; width: calc(100% - 250px;";
    }
}

3. Selecting the main offcanvas element add the functions as static events.
   

The resulting code will look like

<div class="offcanvas offcanvas-start" id="offcanvas1" is="dmx-bs5-offcanvas" tabindex="-1" nobackdrop="true" scroll="true" onshown="openedSidebar()" onhidden="closedSidebar()">

This effect will be applied to screens that have a minimum width of 768px.

junk

EDIT: Nearly forgot, the content that needs moving needs to have an ID of main. In my case I have wrapped all of the content in <div id="main">......</div>

[sid]

Why not just use the dynamic class toggle rather than so much JS?
Create the CSS in page or in CSS file, and toggle the class based on some Wappler variable on body or main div.

[ben]

I took the easy way out , I did not want to spend much time on it, mainly because I do not see the point in moving the content.

On small screens this (moving content) would not work, on larger screens, I would prefer to use a visible sidebar.

Not only that, presently the offscreen disappears when clicking anywhere on the page and I could not find a way to overcome this like we do with the Modal.

Getting back to your point. I find this interesting because it would give it a Wappler solution.