How to always hide sidebar on load in Gentelella like in mobile mode?

I need to keep the sidebar menu hidden by default at all times, so that when the user clicks the toggle button it'll display the collapsed menu(nav-sm).

In other words, I need the same behavior the mobile mode has, in all devices. I tried a lot, but couldn't make any progress!

Solution

Not sure if anyone is having this issues, but here is what I found:

The nav-sm, nav-md and nav-lg classes define the style of the sidebar. Now, the nav-md is original mode of gentelella, and it hides de sidebar for small devices. I does this using a @media query:

@media (max-width: 991px) {
    .nav-md .container.body .right_col,
    .nav-md .container.body .top_nav {
        width: 100%;
        margin: 0
    }
    .nav-md .container.body .col-md-3.left_col {
        display: none
    }
    .nav-md .container.body .right_col {
        width: 100%;
        padding-right: 0
    }
    .right_col {
        padding: 10px !important
    }
}

If you do the same things outside the query, it'll override the original styles and the sidebar will work the same in any device... This is what I wanted, albeit I'm sure is a rather ugly way of doing it. If anyone sees this and has a better understanding of things i'd appreciate some comments.

PS: this actually creates a new problem with the blue background at the bottom of the page. But that's another story.

This is useful: https://misc.laboradian.com/dashboard-sample/1/