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!
This may help you
YouTube Video
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
Hi @eric,
Thank you for the enlightmen… will try now…
It works… thank you!
Have you managed to do this, where the sidebar when hidden becomes just an icon like in the screenshot below?