Hide sidebar on xs by default

[divan]

Currently SBAdmin2 page shows sidebar by default when opened on the mobile device. It takes a good share of scarce screen width, and for my use case I would love to hide it on mobile. Is there an easy way to achieve it?

As I understand the solution is to add toggled class to sidebar only when opened on the small screen size.

[divan]

Ended up modifying sb-admin-2.js with following code:

if ($(window).width() < 768) {
  $(“.sidebar”).addClass(“toggled”)
}

but maybe there is a more “idiomatic” solution?

[pinq-]

I had same solution, but it "jumps" in the beginnig.

[davidtmiller]

I'll be doing some thinking about the side nav implementation in the next build!

[ewwink]

reverse .sidebar.toggled rules

@media (max-width:768px) {
    .sidebar {
        width: 0 !important;
        overflow: hidden;
    }

    .sidebar.toggled {
        width: auto !important;
    }
}

[ccccgw]

您好，您的邮件我已经收到，我会尽快回复！  谢谢！

[FamiAbz]

I found a better solution to that, Just add this codes in your js file:

if ($(window).width() < 768) { $(".sidebar").addClass("toggled"); $(".nav-link").addClass("collapsed"); $("#collapseUtilities").removeClass("show"); }

[AnnBonador]

I found a better solution to that, Just add this codes in your js file:

if ($(window).width() < 768) { $(".sidebar").addClass("toggled"); $(".nav-link").addClass("collapsed"); $("#collapseUtilities").removeClass("show"); }

Thanks, working in 2023

[ccccgw]

您好，您的邮件我已经收到，我会尽快回复！  谢谢！