[AFP-131 Shaphen Pangburn]: Add cart item count indicator next to cart icon in nav bar

ecom-web/src/components/Header/header-container.js

 import { connect } from 'react-redux';
 import Header from './header';
+import { fetchUserCart } from '../../actions/cart_actions';
 
 const mSTP = state => ({
-    user: state.user
+    user: state.user,
+    cartLength: state.cart.length
 });
 
 const mDTP = dispatch => ({

ecom-web/src/components/Header/header.css

-/* .order-history-nav,
-.products-nav,
-#nav-bar-text,
-.cart-nav {
-    padding-left: 10px;
-    padding-top: 11px;
-    padding-bottom: 10px;
-    color: white;
-} */
 
 .header-nav {
     padding-left: 20px;
     box-shadow: 0px 1px 10px;
 }
 
-/* #nav-home-link {
-    margin-bottom: 3px;
-} */
-
 .nav-bar-text {
     padding: 13px 20px 0px;
 }
@@ -34,3 +21,29 @@
     margin-right: 12px;
     opacity: 0.3;
 }
+
+.cart-link-container {
+    position: relative;
+}
+
+.ms-auto {
+    position: relative;
+}
+
+.items-in-cart {
+    position: absolute;
+    right: 10px;
+    top: 1px;
+    padding: 0px 8px;
+    background-color: gray;
+    border-radius: 15px;
+    cursor: pointer;
+
+    /* transition: all 0.5s; */
+    animation: fadeIn;
+    animation-duration: 0.5s;
+}
+
+.no-show {
+    display: none;
+}

ecom-web/src/components/Header/header.js

@@ -4,7 +4,6 @@ import Navbar from 'react-bootstrap/Navbar'
 import NavDropdown from 'react-bootstrap/NavDropdown'
 import {NavLink} from 'react-router-dom'
 import Session from '../session/session-container'
-import HeaderCart from './header-cart-container'
 import {LinkContainer} from 'react-router-bootstrap'
 import { AiOutlineShoppingCart } from 'react-icons/ai'
 
@@ -44,6 +43,10 @@ export default class Header extends Component {
                             <LinkContainer to="/cart" >
                                 <Nav.Link to="/cart" className="cart-link" id={this.props.user?.currentUser ? "" : "disabled-cart-link"} disabled={ !this.props.user?.currentUser }><AiOutlineShoppingCart fill="black" size={30} /></Nav.Link>
                             </LinkContainer>
+                            <LinkContainer to="/cart" >
+                                <Nav.Link to="/cart" className={ this.props.cartLength > 0 ? "items-in-cart" : "no-show" }>{ this.props.cartLength }</Nav.Link>
+                            </LinkContainer>
+                            {/* <span id="items-in-cart">{ this.props.cartLength }</span> */}
                         </Nav>
                     </Navbar.Collapse>
                 </Navbar>

ecom-web/src/resources/stylesheets/footer.css

@@ -5,4 +5,5 @@
     align-items: center;
     background-color: #f8f9fa;
     opacity: 0.4;
+    cursor: default;
 }
\ No newline at end of file