Enhance cart functionality and layout; add item quantity input and update styles for better responsiveness

website/style.css

@@ -3,26 +3,36 @@ body {
     font-family: Arial, sans-serif;
     margin: 0;
     display: flex;
-    justify-content: space-between;
+    flex-direction: column; /* Change to column to accommodate the top bar */
     background-color: #f2c14e;
 }
 
-/* Linkerkant menu */
-.menu-list {
-    width: 25%;
+/* Top bar menu */
+.menu-bar {
+    width: 100%;
     background-color: #f2c14e;
-    padding: 20px;
-    height: 100vh;
-    overflow-y: auto;
+    padding: 10px 0;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    position: fixed; /* Fix the top bar to the top */
+    top: 0;
+    z-index: 1000; /* Ensure it is above other elements */
+    transition: background-color 0.3s ease; /* Add transition for background color */
+}
+
+.menu-bar.dark {
+    background-color: #d1a73e; /* Darker background color when modal is open */
 }
 
 .menu-item {
     background-color: #fff;
-    padding: 20px;
-    margin: 10px 0;
+    padding: 10px 20px;
+    margin: 5px;
     border-radius: 8px;
     cursor: pointer;
-    font-size: 1.5em;
+    font-size: 1.2em;
     transition: all 0.3s ease;
 }
 
@@ -33,15 +43,16 @@ body {
 
 /* Productweergave in een grid */
 .product-display {
-    width: 55%;
+    width: calc(100% - 20%); /* Adjust width to leave space for the cart */
+    display: flex;
     flex-wrap: wrap;
-    padding: 50px;
-    justify-content: space-between 40px;
-    display: inline-flex;
+    padding: 20px;
+    justify-content: space-around;
+    margin-top: 60px; /* Add margin to ensure it starts below the top bar */
 }
 
 .product-box {
-    width: 200px;
+    width: 200px; /* Keep the width fixed */
     margin: 10px;
     border-radius: 8px;
     overflow: hidden;
@@ -49,8 +60,6 @@ body {
     text-align: center;
     cursor: pointer;
     transition: all 0.3s ease;
-    
-    
 }
 
 .product-box:hover {
@@ -95,32 +104,14 @@ body {
 }
 
 .close {
-    color: red;
     position: absolute;
-    top: 80px;
-    right: 450px;
-    font-size: 40px;
+    top: 10px;
+    right: 20px;
+    font-size: 30px;
     font-weight: bold;
     cursor: pointer;
 }
 
-/* Winkelmandje */
-.cart {
-    width: 25%;
-    padding: 20px;
-    background-color: #fff;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-.cart ul {
-    list-style-type: none;
-    padding: 0;
-}
-
-.cart li {
-    margin-bottom: 10px;
-}
-
 #add-to-cart {
     background-color: #4CAF50;
     color: white;
@@ -128,16 +119,17 @@ body {
     padding: 10px 20px;
     cursor: pointer;
     border-radius: 5px;
+    margin-top: 20px;
 }
 
 #add-to-cart:hover {
     background-color: #45a049;
 }
 
- /* Winkelwagen-icoon */
- .cart-icon {
+/* Winkelwagen-icoon */
+.cart-icon {
     position: fixed;
-    top: 20px;
+    top: 80px; /* Move the cart icon down */
     right: 20px;
     background-color: #ff6600;
     color: white;
@@ -188,4 +180,23 @@ body {
 
 .product button:hover {
     background-color: #e65c00;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .menu-bar {
+        flex-wrap: wrap; /* Allow wrapping of menu items */
+    }
+
+    .product-display {
+        width: 100%; /* Use full width for product display */
+        margin-top: 120px; /* Increase margin to accommodate wrapped menu bar */
+    }
+
+    .cart {
+        width: 100%; /* Use full width for cart */
+        top: auto; /* Remove fixed position */
+        bottom: 0; /* Position at the bottom */
+        height: auto; /* Adjust height */
+    }
 }