Javascript для регулировки ширины боковой панели% в зависимости от размера экрана

Question

В моем проекте есть боковая панель, которая выдвигает событие щелчка, и я хотел бы добиться, чтобы боковая панель выдвигалась на разные размеры ширины в зависимости от размера экрана пользователя.

т.е:.

, если пользователь находится на экране шириной 768 пикселей и выше, боковая панель будет выталкиваться на ширину 20%.

, если пользователь на экране размером 767 пикселей и ниже боковой панели будет выдвигаться на ширину 95%.

Я попробовал следующий код, приведенный ниже, однако он работает некорректно и увеличивает ширину боковой панели до 20% независимо от размера экрана.

Если кто-то может помочь, это было бы здорово!

 <a>
  <i class="sideNavBars fas fa-bars fa-2x" onclick="openNav()"></i>
</a>

<div id="mySidenav" class="sidenav text-center">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <div>
   <p>Sidebar content</p>
  </div>
</dvi>


if ($(window).width() > 739) {
  function openNav() {
    document.getElementById("mySidenav").style.width = "20%";
    document.getElementById("sideBarWrapper").style.marginRight = "20%";
  }
}
else {
  function openNav() {
    document.getElementById("mySidenav").style.width = "95%";
    document.getElementById("sideBarWrapper").style.marginRight = "95%";
  }
}

Answer 1

Дайте вашей боковой панели класс (здесь .sidenav) и добавьте медиазапросы:

.sidenav {
    display: none;
}

@media(min-width: 768px){
    #mySidenav {
        width: 20%;
    }
}

@media(max-width: 767px){
    #mySidenav {
        width: 95%;
    }
}

Затем добавьте этот кусок кода:

openNav() {
    var sidebar = document.getElementById("sideNav");
    sidebar.classList.toggle("sidenav");
}

См .: https://www.w3schools.com/css/css3_mediaqueries_ex.asp

и: https://www.w3schools.com/howto/howto_js_toggle_class.asp