HTML / CSS боковая панель навигации не работает должным образом

Question

У меня есть простой макет с двумя столбцами, первый столбец - боковая панель навигации, а второй столбец - содержимое. У меня есть кнопка, чтобы скрыть / показать боковую панель навигации. Логика c, которая делает боковую панель отзывчивой, заключается в том, что у меня есть css пользовательская переменная var (- navbar-width), которая управляет шириной боковой панели навигации. Для маленьких экранов переменная (- navbar-width) равна 0, а для других переменная (- navbar-width) - 12rem. У меня есть медиа-запрос, который устанавливает значение var (- navbar-width) равным 0, если размер экрана меньше 600 пикселей. Кроме того, когда нажимается кнопка переключения, значение var (- navbar-width) переключается между 0 и 12rem.

Теперь проблема заключается в том, что когда я нажимаю кнопку переключения, медиа-запрос больше не работает. Я не знаю, почему у меня такое поведение.

$(function() {
  $("#toggleNavBar").click(function() {
    let width = getComputedStyle(document.documentElement, null).getPropertyValue("--navbar-width");

    if (width.trim() == "0") {
      document.documentElement.style.setProperty("--navbar-width", "12rem");
    } else {
      document.documentElement.style.setProperty("--navbar-width", "0");
    }
  });
});

:root {
  font-size: 16px;
  --navbar-width: 12rem;
}

.wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: minmax(100vh, auto);
}

#navbar {
  background-color: #afafaf;
  width: var(--navbar-width);
  transition: width 200ms ease;
}

@media screen and (max-width: 600px) {
   :root {
    --navbar-width: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="wrapper">
  <nav id="navbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">...</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">...</a>
      </li>
    </ul>
  </nav>
  <main id="content">
    <button id="toggleNavBar">Toggle</button>
    <h1>...</h1>
    <p>...</p>
  </main>
</div>

Код указан ниже, ссылка на кодовый блок https://codepen.io/isyedaliraza/pen/rNVbroq

Answer 1

Здесь я сделал это для вас с нуля

    var navElement = document.querySelector("nav"),
      mainElement = document.querySelector("main");
    document.querySelector("button").onclick = function() {
      navElement.classList.toggle("wzero");
      mainElement.classList.toggle("wfull");
    }
    document.body.onresize = function() {
      if(window.innerWidth > 600) {
        navElement.className = "";
        mainElement.className = "";
      }else {
        navElement.className = "wzero";
        mainElement.className = "wfull";
      }
    }

    * {
      box-sizing: border-box;
    }
    html, body {
      margin: 0;
    }
    #container {
      display: flex;
      height: 100vh;
      width: 100%;
      overflow: hidden;
    }
    nav {
      width: 25%;
      background-color: gray;
      transition: width .5s ease;
    }
    main {
      width: 75%;
      background-color: lightgray;
      transition: width .5s ease;
    }
    .wzero {
      width: 0;
    }
    .wfull {
      width: 100%;
    }

<div id="container">
    <nav>Nav</nav>
    <main><button>Toggle</button> Main</main>
  </div>

Answer 2

Если я правильно понимаю вашу проблему, ваша navbar. Если вам нужен эффект плавного перехода navbar, необходимо fixed положение. Ниже code, а вот ручка . Я изменяю ваш HTML код. Также я не использовал ваш код CSS и JS. Я не изменяю свойство CSS, используя jQuery. Я использовал добавить и удалить class.

HTML

<div class="wrapper">

  <nav class="navbar" id="navbar">
    <button id="navbarClose" class="close">x</button>
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">One</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Two</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Three</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Four</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Five</a>
      </li>
    </ul>
  </nav>

  <main class="main-wrapper" id="content">
    <button class="btn btn-primary" id="toggleNavBar">Toggle</button>
    <h1>Lorem Ipsum!</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores, a? Quam fugit quos eligendi voluptatum temporibus, libero tempora aperiam error culpa amet, iure distinctio sequi, obcaecati consequuntur quae a enim!</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Incidunt eligendi ipsa labore dolorum qui accusamus magni cum maxime possimus iusto dolor tenetur minus nesciunt, ipsum autem assumenda, facere distinctio temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam nobis animi voluptas beatae. Pariatur iure, maxime fuga quam animi sapiente? Laborum voluptates similique neque qui! Dolore, et. Corporis, eveniet natus?</p>
  </main>

</div>

CSS

body{
  overflow: hidden;
}
.wrapper{
  min-height: 100vh;
  position: relative;
}
.navbar{
  align-items: flex-start;
  background-color: black;
  height: 100%;
  padding-bottom: 30px;
  padding-top: 30px;
  position: fixed;
  transform: translateX(0);
  transition: all 0.3s ease-in-out 0s;
  width: 250px;
  z-index: 1000;
}
@media (max-width: 767px){
  .navbar{
    transform: translateX(-100%);
    width: 100%;
  }
}
.navbar .close{
  display: none;
  font-size: 14px;
  line-height: 1;
  border-radius: 50%;
  border: 2px solid red;
  font-weight: normal;
  opacity: 1;
  color: white;
  text-shadow: none;
  height: 24px;
  width: 24px;
  position: absolute;
  top: 10px;
  right: 15px;
}
@media (max-width: 767px){
  .navbar .close{
    display: block;
  }
}
.navbar.active{
  transform: translateX(-100%);
}
@media (max-width: 767px){
  .navbar.active{
    transform: translateX(0);
  }
}
.main-wrapper{
  background-color: #f8f8f7;
  min-height: 100vh;
  padding: 30px 30px 30px 280px;
  position: relative;
  transition: all 0.3s ease-in-out 0s;
  width: 100%;
}
@media (max-width: 767px){
  .main-wrapper{
    padding: 30px 15px;
  }
}
.main-wrapper.active{
  padding-left: 30px;
}
@media (max-width: 767px){
  .main-wrapper.active{
    padding-left: 15px;
  }
}

JS

$(function(){
  $('#toggleNavBar').on('click', function(){
    $('#content').toggleClass('active');
    $('#navbar').toggleClass('active');
  });
  $('#navbarClose').on('click', function(){
    $('#content').toggleClass('active');
    $('#navbar').toggleClass('active');
  });
});

Примечание. Я использую bootstrap CSS для изменения стиля пользовательского агента браузера с помощью свойства normalize css .

Надеюсь, это поможет вам!