fix: texts directed to the cart sidebar are disappearing

bernardofernandezz · Jun 25, 2024 · 137fe8d · 137fe8d
1 parent cce894b
commit 137fe8d
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 11 deletions.
diff --git a/cardapio/index.html b/cardapio/index.html
@@ -25,7 +25,6 @@
           <li><a href="../cardapio/index.html">Cardápio</a></li>
           <li><a href="#">Contato</a></li>
           <li><a href="#">FeedBack</a></li>
-          <li><a href="#" onclick="openNav()"><ion-icon size="large" name="cart-outline"></ion-icon></a></li>
         </ul>
       </nav>
     </div>
@@ -176,17 +175,21 @@ <h3 class="menu-item-heading">
         </div>
       </div>
       <div id="sidebar" class="sidebar">
+        <div class="cart-header">
+          <span id="close-btn" class="close-btn">&times;</span>
+          <h2>Carrinho</h2>
+        </div>
         <div id='cart-items' class="sidebar-content">
-            <span id="close-btn" class="close-btn">&times;</span>
-            <h2>Carrinho</h2>
             <p id="emptycart">Seu carrinho está vazio.</p>
         </div>
         <div class="cart-footer">
           <p>Total: R$<span id="cart-total">0.00</span></p>
           <button id="clear-cart-btn">Remover Todos</button>
           <button id="checkout-btn">Finalizar Compra</button>
       </div>
+      <div class="resize-handle" id="resize-handle"></div>
     </div>
+
     </main>
 </div>
     <script src="./main.js"></script>

diff --git a/cardapio/main.js b/cardapio/main.js
@@ -2,12 +2,44 @@
 
 // Função para abrir a aba lateral
 function openSidebar() {
-  document.getElementById("sidebar").classList.add("active");
+  const sidebar = document.getElementById("sidebar");
+  sidebar.classList.add("active");
+
+  // Ajuste para dispositivos móveis
+  if (window.innerWidth <= 320 || window.innerWidth <= 768) {
+    sidebar.style.width = "100%";
+  } else {
+    sidebar.style.width = "300px";
+  }
 }
 
 // Função para fechar a aba lateral
 function closeSidebar() {
   document.getElementById("sidebar").classList.remove("active");
+  document.getElementById("sidebar").style.width = "0";
+}
+
+const sidebar = document.getElementById("sidebar");
+
+let startWidth = 0;
+let currentWidth = 0;
+
+sidebar.addEventListener("mousedown", (event) => {
+  startWidth = sidebar.offsetWidth;
+  currentWidth = startWidth;
+
+  document.addEventListener("mousemove", handleMouseMove);
+  document.addEventListener("mouseup", handleMouseUp);
+});
+
+function handleMouseMove(event) {
+  const newWidth = startWidth + (event.clientX - event.offsetX);
+  sidebar.style.width = `${newWidth}px`;
+}
+
+function handleMouseUp() {
+  document.removeEventListener("mousemove", handleMouseMove);
+  document.removeEventListener("mouseup", handleMouseUp);
 }
 
 // Função para calcular o total do carrinho
@@ -88,6 +120,7 @@ function updateTotalPrice(event) {
   calculateCartTotal();
 }
 function addEmptyMessage(cartItems) {
+  console.log("cartitems:91", cartItems);
   cartItems.innerHTML = '<p id="emptycart">Seu carrinho está vazio.</p>';
 }
 
@@ -109,6 +142,7 @@ function removeCartItem(event) {
 // Função para remover todos os itens do carrinho
 function clearCart() {
   const cartItems = document.getElementById("cart-items");
+  console.log("cartitems:112", cartItems);
   addEmptyMessage(cartItems);
   // Atualizar o total do carrinho
   calculateCartTotal();

diff --git a/cardapio/style.css b/cardapio/style.css
@@ -6,6 +6,7 @@
   box-sizing: border-box;
   font-family: "Source Sans Pro", "Poppins", sans-serif;
   animation: appear 1s backwards;
+  padding: 0;
 }
 body {
   /* background: #333; */
@@ -32,6 +33,10 @@ header > .menu {
 }
 .menu ul li {
   list-style: none;
+  padding: 5px;
+}
+li + li {
+  margin-left: 10px;
 }
 .menu ul li a {
   color: rgb(8, 8, 8);
@@ -206,6 +211,11 @@ p {
   animation-delay: 0.2s;
 }
 
+#sidebar > .cart-header h2 {
+  padding: 1.1rem;
+  margin-bottom: 0;
+}
+
 .sidebar p {
   animation-delay: 0.2s;
 }
@@ -276,12 +286,6 @@ button {
   }
 }
 
-/* styles.css */
-
-body {
-  font-family: Arial, sans-serif;
-}
-
 .add-to-cart-btn {
   padding: 10px 20px;
   font-size: 16px;
@@ -304,7 +308,7 @@ body {
 }
 
 .sidebar-content {
-  padding: 20px;
+  padding-left: 10px;
 }
 
 .close-btn {
@@ -341,3 +345,36 @@ body {
   font-size: 16px;
   cursor: pointer;
 }
+/* Estilo para a barra de redimensionamento */
+.resize-handle {
+  width: 10px;
+  background-color: #444;
+  cursor: ew-resize;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: -10px;
+}
+
+/* Media queries para responsividade */
+@media (max-width: 320px) {
+  .sidebar {
+    max-width: 30%;
+  }
+
+  .close-btn {
+    font-size: 28px;
+    right: 15px;
+  }
+}
+
+@media (max-width: 768px) {
+  .sidebar {
+    max-width: 30%;
+  }
+
+  .close-btn {
+    font-size: 32px;
+    right: 20px;
+  }
+}