Assignment of displaying cart total as side navigation completed

src/App.jsx

@@ -1,10 +1,9 @@
-import React, { useState } from 'react';
-
-import ProductList from './components/ProductList';
-import Cart from './components/Cart';
-import CartContext from './contexts/CartContext';
-
+import React, { useState } from "react";
 
+import ProductList from "./components/ProductList";
+import Cart from "./components/Cart";
+import CartContext from "./contexts/CartContext";
+import styles from "./App.module.css";
 // oldCart === newCart
 
 // {
@@ -25,6 +24,7 @@ function App() {
    * }
    */
   const [cart, setCart] = useState({});
+  const [show, setShow] = useState(false);
 
   function increaseQuantity(product) {
     const newCart = { ...cart };
@@ -37,9 +37,9 @@ function App() {
         title: product.title,
         price: product.price,
         quantity: 0,
-      }
+      };
     }
-    
+
     newCart[product.id].quantity += 1;
 
     setCart(newCart);
@@ -59,27 +59,35 @@ function App() {
     setCart(newCart);
   }
 
-  console.log('App rendered');
+  console.log("App rendered");
 
   return (
-    <CartContext.Provider
-      value={{ cart, increaseQuantity, decreaseQuantity }}
-    >
+    <CartContext.Provider value={{ cart, increaseQuantity, decreaseQuantity }}>
+      <div className={styles.carttoggle}>
+        {show === false && (
+          <button onClick={() => setShow(true)}>Open Cart</button>
+        )}
+        {show === true && (
+          <button onClick={() => setShow(false)}>Close Cart</button>
+        )}
+      </div>
+      {show && (
+        <div className={styles.sidenav}>
+          <Cart />
+        </div>
+      )}
       <div>
-        <Cart />
         <ProductList />
       </div>
     </CartContext.Provider>
-  )
+  );
 }
 
 export default App;
 
-
 // By default a component re renders:
 // 1. It's internal state changes
 // 2. It's props change
 // 3. If it subscribed to a context and value of the context changes
 // 4. Parent re renders
-// 
-
+//

src/App.module.css

@@ -0,0 +1,19 @@
+.carttoggle {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 999;
+}
+
+.sidenav {
+  height: 100%;
+  width: 250px;
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  right: 0;
+  background-color: #e7c1c1;
+  overflow-x: hidden;
+  transition: 0.5s;
+  padding-top: 60px;
+}

src/components/Cart/Cart.jsx

@@ -1,8 +1,8 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from "react";
 
-import CartContext from '../../contexts/CartContext';
+import CartContext from "../../contexts/CartContext";
 
-import styles from './Cart.module.css';
+import styles from "./Cart.module.css";
 
 // {
 //   '1': { id: '1' },
@@ -13,24 +13,27 @@ import styles from './Cart.module.css';
 function Cart() {
   const { cart } = useContext(CartContext);
   const cartList = Object.values(cart);
-
-  console.log('Cart rendered');
+  const [cartTotal, setCartTotal] = useState(0);
 
   if (cartList.length === 0) {
-    return (
-      <div className={styles.cart}>No items in the cart!</div>
-    );
+    return <div className={styles.cart}>No items in the cart!</div>;
   } else {
     return (
-      <ol>
-        {cartList.map(cartItem => (
-          <li key={cartItem.id}>
-            <div>{cartItem.title}</div>
-            <div>Quantity: {cartItem.quantity}</div>
-          </li>
-        ))}
-      </ol>
-    )
+      <div>
+        <ol>
+          {cartList.map((cartItem) => (
+            <li key={cartItem.id}>
+              <div>{cartItem.title}</div>
+              <div className={styles.cart}>
+                Rs:{cartItem.price} * {cartItem.quantity} = Rs:
+                {cartItem.price * cartItem.quantity}
+              </div>
+            </li>
+          ))}
+        </ol>
+        <div>Cart Total:{cartTotal}</div>
+      </div>
+    );
   }
 }
 

src/components/ProductCard/ProductCard.module.css

@@ -1,5 +1,5 @@
 .card {
   padding: 10px;
   border: 1px solid black;
-  margin: 10px;
-}
+  margin: 25px 10px 30px 10px;
+}