Блог

Я создаю меню слайдов, которое появится справа от моей страницы, нажав на кнопку, когда я нажимаю на кнопку для переключения, меню слайдов влияет на ширину всей страницы. У меня есть 100% ширины моей страницы с максимальной шириной 1440 пикселей плюс ширина слайда, которая составляет 400 пикселей.

Я знаю, может быть, это как-то связано с функцией calc, но у меня есть стек?

<— Компонент слайда —>

 const SlideNav = () => {
    return (
       <nav className="slide">
           <div className="product-details">
               <div className="img-container">
                   <img src="./Pictures/FreeGuy.jpg" alt="FreeGuy" />
               </div>
               <div className="product info">
                   <h1 className="title">Free Guy movie</h1>
                   <div className="quantity">
                       <h4>Quantity</h4>
                       <span>4</span>
                   </div>
                   <h5 className="prix">11

lt;/h5>

                   <button className="btn-checkout">Continue to checkout</button>

               </div>

           </div>

       </nav>

    )

}
export default SlideNav;

 

<— Css компонента слайда —>
 .slide {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  height: 100vh;
  width: 500px;
  color: #ffff;
  transform: translateX(500px);
}

.product-details {
  display: flex;
  position: absolute;
  top: 90px;
  left: 60px;
}

.img-container {
  width: 200px;
  height: 300px;
  margin-right: 20px;
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
 
<— Файл CSS приложения для изменения значения слайда и добавления класса показать класс для переключения слайда —>
 body {
  font-family: "Poppins", sans-serif;
  background-color: #e9f4fc;
  color: #000;
}

.App {
  width: 100%;
}

.App.showClass {
  transform: translateX(0%);
}

.App .page-wrapper {
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
}