<div class="wrap">
  <div class="sidebar"></div>
  <div class="content">
    <div class="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://picsum.photos/id/33/1000/700">
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/id/45/1000/700">
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/id/77/1000/700">
        </div>
        <div class="swiper-slide">
          <img src="https://picsum.photos/id/74/1000/700">
        </div>
      </div>

      <div class="swiper-pagination"></div>

      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>
</div>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.wrap {
  display: flex;
  height: 100vh;
}
.wrap > * {
  min-width: 0;
}
.sidebar {
  width: 70px;
  height: 100%;
  background-color: navy;
  transition: width .5s;
  cursor: pointer;
  flex-shrink: 0;
}
.sidebar.active {
  width: 300px;
}
.content {
  height: 100%;
  flex-grow: 1;
  background-color: #ccc;
  padding: 10px;
}
.swiper {
  height: 200px;
  width: 90%;
}
.swiper-slide {

}
.swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

let swiper = null;

let sidebar = document.querySelector('.sidebar');
sidebar.addEventListener('click', function() {
  this.classList.toggle('active');
  if ( this.classList.contains('active') ) {
    initSwiper2();
  }
  else {
    initSwiper();
  }
})

function initSwiper() {
  if (swiper) {
    swiper.destroy()
  }
  swiper = new Swiper('.swiper', {
    loop: true,
    slidesPerView: 3,
    spaceBetween: 30,
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
}

function initSwiper2() {
  if (swiper) {
    swiper.destroy()
  }
  swiper = new Swiper('.swiper', {
    loop: true,
    slidesPerView: 2,
    spaceBetween: 30,
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
}

initSwiper();