Hello,
I tried to create a collapsible side menu like this, based on this sample template from @Teodor .
I saw there is a variable ‘sidebartoggle’, that changes the icon button. However, still can’t get an idea of how the side menu hides/shows. I don’t see any dynamic attributes there.
Thank you!
Noted, will check…
Hi @mohif1995 in the tutorial they are using off-canvas, then apply CSS provided. But until the end of video, the side menu is no longer collapsible as per the sample template I mentioned above. Do you have any other references or video tutorials in regards to achieving this layout?
With Bootstrap 5 you have a built-in component called offcanvas. It is used exactly for such cases, so no need of the custom solution I posted some time ago.
Noted for this offcanvas, found the tutorial on Wappler Youtube.
However, I would like to create a sidebar when hide becomes an icon only like below screenshot.
If you haven’t got a solution yet. I may have one for you. I used @ben tutorial in this thread. Combining his other thread here.
I created my own css file called offcanvas.css
.offcanvas {
width: 250px; /*adjust as required*/
--offcanvas-width: 250px;
}
#main {
-webkit-transition: margin-left .5s;
transition: margin-left .5s; /*sliding effect*/
}
@media (min-width: 992px) {
main {
margin-left: var(--offcanvas-width);
}
.offcanvas-backdrop::before {
display: none;
}
}
Used his Java script from the thread.
new_recording_-_4_14_2022,_11_10_46_am (540p)
To have it auto show. Select the Auto Show in offcanvas Main.
Hope that helps. Also thanks @ben
It works… thank you!