update: store + cart styling

react/shopping-cart/src/App.js

@@ -1,38 +1,54 @@
 import { useState } from "react";
+import { addToCart, updateCartQuantity } from "./lib/Cart";
 import ShoppingCart from "./Components/ShoppingCart";
 import RouteSwitch from "./Router/RouteSwitch";
-import { addToCart, updateCartQuantity } from "./lib/Cart";
+import "./Assets/App.css";
 
 const App = () => {
-  const testCart = [
-    { name: "one", id: 1, price: 10, quantity: 1 },
-    { name: "two", id: 2, price: 20, quantity: 2 },
-    { name: "three", id: 3, price: 30, quantity: 3 },
-  ];
-  const [cart, setCart] = useState(testCart);
+    const testCart = [
+        { name: "one", id: 1, price: 10, quantity: 1 },
+        { name: "two", id: 2, price: 20, quantity: 2 },
+        { name: "three", id: 3, price: 30, quantity: 3 }
+    ];
+    const [cart, setCart] = useState(testCart);
+
+    const addItemToCart = (item) => {
+        addToCart(item, setCart, cart);
+    };
+    const updateCartItemQuantity = (id, quantity) => {
+        updateCartQuantity(id, quantity, setCart, cart);
+    };
 
-  const addItemToCart = (item) => {
-    addToCart(item, setCart, cart);
-  };
-  const updateCartItemQuantity = (id, quantity) => {
-    updateCartQuantity(id, quantity, setCart, cart);
-  };
+    const toggleCartVisibility = () => {
+        const cartElement = document.getElementById("shopping-cart-main");
+        cartElement.className =
+            cartElement.className === "shopping-cart-main-hidden"
+                ? "shopping-cart-main-shown"
+                : "shopping-cart-main-hidden";
+        moveCartButtonWhenCartShown();
+    };
 
-  const toggleCartVisibility = () => {
-    const cartElement = document.getElementById("shopping-cart-main");
-    cartElement.className =
-      cartElement.className === "shopping-cart-main-hidden"
-        ? "shopping-cart-main-shown"
-        : "shopping-cart-main-hidden";
-  };
+    const moveCartButtonWhenCartShown = () => {
+        const button = document.getElementById("cart-button");
+        button.className =
+            button.className === "cart-button"
+                ? "cart-button-cart-shown"
+                : "cart-button";
+    };
 
-  return (
-    <div>
-      <ShoppingCart cart={cart} updateQuantity={updateCartItemQuantity} />
-      <RouteSwitch addToCart={addItemToCart} />
-      <button onClick={toggleCartVisibility}>cart</button>
-    </div>
-  );
+    return (
+        <div className="app-main-div">
+            <ShoppingCart cart={cart} updateQuantity={updateCartItemQuantity} />
+            <RouteSwitch addToCart={addItemToCart} />
+            <div
+                id="cart-button"
+                className="cart-button"
+                onClick={toggleCartVisibility}
+            >
+                cart
+            </div>
+        </div>
+    );
 };
 
 export default App;

react/shopping-cart/src/Assets/App.css

@@ -0,0 +1,25 @@
+.app-main-div {
+    height: 100vh;
+}
+
+.cart-button,
+.cart-button-cart-shown {
+    position: absolute;
+    top: 23px;
+
+    border-style: outset;
+    padding: 0px 4px;
+    color: black;
+
+    cursor: pointer;
+}
+
+.cart-button {
+    right: 80px;
+    transition: right 0.5s ease 0s;
+}
+
+.cart-button-cart-shown {
+    right: calc(450px + 30px);
+    transition: right 0.3s ease 0s;
+}

react/shopping-cart/src/Assets/NavBar.css

@@ -0,0 +1,15 @@
+.nav-bar-list {
+    display: flex;
+    flex-direction: row;
+    gap: 6px;
+    padding: 0 80px;
+
+    list-style-type: none;
+}
+
+.nav-bar-link {
+    border-style: outset;
+    padding: 0px 4px;
+    text-decoration: none;
+    color: black;
+}

react/shopping-cart/src/Assets/ShoppingCart.css

@@ -1,9 +1,11 @@
 .shopping-cart-main-hidden {
-    right: -30%;
+    right: -110%;
+    transition: right 0.7s ease 0s;
 }
 
 .shopping-cart-main-shown {
     right: 0px;
+    transition: right 0.25s ease 0s;
 }
 
 .shopping-cart-main-shown,
@@ -12,15 +14,14 @@
     border-width: 3px;
     background-color: #a4a4a4;
 
-    margin: 5px 5px;
+    margin: 5px 0px;
     padding: 5px 5px;
 
     position: fixed;
     top: 0px;
     bottom: 0px;
-    transition: right 0.55s ease-in-out 0s;
 
-    width: 22%;
+    width: 450px;
     min-width: 450px;
 
     overflow: auto;

react/shopping-cart/src/Assets/Store.css

@@ -0,0 +1,16 @@
+.store-main-div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    background: rgb(71, 129, 181);
+}
+
+.store-items {
+    display: flex;
+    flex-direction: row;
+    gap: 5px;
+    padding: 5px 5px;
+
+    background: aliceblue;
+}

react/shopping-cart/src/Components/NavBar.js

@@ -1,18 +1,23 @@
 import { Link } from "react-router-dom";
+import "../Assets/NavBar.css";
 
 const NavBar = () => {
-  return (
-    <div>
-      <ul>
-        <li>
-          <Link to="/">Home</Link>
-        </li>
-        <li>
-          <Link to="./store">Store</Link>
-        </li>
-      </ul>
-    </div>
-  );
+    return (
+        <div>
+            <ul className="nav-bar-list">
+                <li className="nav-bar-list-item">
+                    <Link to="/" className="nav-bar-link">
+                        Home
+                    </Link>
+                </li>
+                <li>
+                    <Link to="./store" className="nav-bar-link">
+                        Store
+                    </Link>
+                </li>
+            </ul>
+        </div>
+    );
 };
 
 export default NavBar;

react/shopping-cart/src/Pages/Store.js

@@ -1,4 +1,5 @@
 import ProductCard from "../Components/ProductCard";
+import "../Assets/Store.css";
 
 const Store = ({ addToCart }) => {
     const storeItems = [
@@ -9,7 +10,7 @@ const Store = ({ addToCart }) => {
     ];
 
     return (
-        <div>
+        <div className="store-main-div">
             <h1>Store Page</h1>
             <p>Buy something!</p>
             <div className="store-items">