[AFP 80] Joe header style upgrade

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

+import { connect } from 'react-redux';
+import HeaderCart from './header-cart';
+
+const mSTP = state => ({
+
+});
+
+const mDTP = dispatch => ({
+    
+});
+
+export default connect(mSTP, mDTP)(HeaderCart);
\ No newline at end of file

ecom-web/src/components/Header/header-cart.jsx

+import React, { Component } from 'react'
+import './header.css';
+
+export default class HeaderCart extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <div>
+                Cart
+            </div>
+        )
+    }
+}
\ No newline at end of file

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

@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import Header from './header';
 
 const mSTP = state => ({
-
+    user: state.user
 });
 
 const mDTP = dispatch => ({

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

-.order-history-nav,
+/* .order-history-nav,
 .products-nav,
 #nav-bar-text,
 .cart-nav {
@@ -6,19 +6,17 @@
     padding-top: 11px;
     padding-bottom: 10px;
     color: white;
-}
+} */
 
-.nav-home {
-    color: white;
-    font-size: 20px;
-    margin-left: 10px;
+.header-nav {
+    padding-left: 20px;
 }
 
-#nav-home-link {
+/* #nav-home-link {
     margin-bottom: 3px;
+} */
+
+.nav-bar-text {
+    padding-right: 20px;
 }
 
-#nav-bar-text {
-    opacity: 0.6;
-    cursor: default;
-}
\ No newline at end of file

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

 import React, { Component } from 'react'
 import Nav from 'react-bootstrap/Nav'
 import Navbar from 'react-bootstrap/Navbar'
-// import NavDropdown from 'react-bootstrap/NavDropdown'
+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 './header.css';
 
 export default class Header extends Component {
     constructor(props) {
-    super(props)
-    this.state = {}
+        super(props)
+        this.state = {}
     }
 
     render() {
+        let userName
+        if(!!this.props.user?.currentUser){
+            userName = this.props.user.currentUser.firstName
+        }else{
+            userName = "Guest"
+        }
+
         return (
             <div>
-                <Navbar collapseOnSelect expand="lg" bg="primary" variant="dark">
+                <Navbar className = "header-nav" collapseOnSelect expand="sm" bg="light">
+                    <Navbar.Brand>Ascend Ecommerce</Navbar.Brand>
                     <Navbar.Toggle aria-controls="responsive-navbar-nav" />
-                    <NavLink to="/product-market" id="nav-home-link"><span className="nav-home">Ascend Ecommerce</span></NavLink>
                     <Navbar.Collapse id="responsive-navbar-nav">
-                        <Nav >
-                            <Navbar.Text id="nav-bar-text">
-                                Hello Guest!
-                            </Navbar.Text>
+                        <Nav className="mr-auto">
+                            <Nav.Link to="/product-market" id="nav-home-link">Home</Nav.Link>
+                            <Nav.Link to="/product-market">Products</Nav.Link>
                         </Nav>
-                        <NavLink to="/product-market"><span className="products-nav">Products</span></NavLink>
-                        <NavLink to="/orders"><span className="order-history-nav">Order History</span></NavLink>
-                        <NavLink to="/cart"><span className="cart-nav">Cart</span></NavLink>
                         <Nav className="ms-auto">
-                            <Session />
+                            {!this.props.user?.currentUser ? 
+                                <Navbar.Text className="nav-bar-text">Hello Guest</Navbar.Text> :
+                                <NavDropdown className="nav-bar-text" title={"Hello "+userName} id="collasible-nav-dropdown">
+                                    <NavDropdown.Item to="/orders">Order History</NavDropdown.Item>
+                                </NavDropdown>
+                            }
+                            <Session className="nav-bar-text"/>
+                            <HeaderCart className="nav-bar-text"/>
                         </Nav>
                     </Navbar.Collapse>
                 </Navbar>