How to collapse sidebar by default on mobile

Question

I've bought Lexa bootstrap admin dashboard from Envato elements. but I'm facing a problem. on mobile view, the sidebar is not collapsed by default. Metis Menu is used for the sidebar. but if we click on toggle button it collapses the sidebar by adding a class to body enlarged can someone help me on fixing this. thank you :)

Sidebar

<div class="left side-menu">
  <div class="slimscroll-menu" id="remove-scroll">

      <!--- Sidemenu -->
      <div id="sidebar-menu">
          <!-- Left Menu Start -->
          <ul class="metismenu" id="side-menu">
              <li class="menu-title">Main</li>
              <li>
                  <a href="index.html" class="waves-effect">
                      <i class="mdi mdi-view-dashboard"></i><span class="badge badge-primary badge-pill float-right">2</span> <span> Dashboard </span>
                  </a>
              </li>
              <li>
                  <a href="calendar.html" class="waves-effect"><i class="mdi mdi-calendar-check"></i><span> Calendar </span></a>
              </li>

              -------------------------

          </ul>

      </div>
      <!-- Sidebar -->
      <div class="clearfix"></div>

  </div>
  <!-- Sidebar -left -->

</div>

Answer 1

You can add enlarged class by javascript on a smaller screen.

if (window.innerWidth < 960) {
    document.querySelector("body").classList.add('enlarged')
}