File clean up. Refactor header.

client/src/components/header/header.component.jsx

@@ -1,27 +1,35 @@
-import { Col, Icon, Menu, Row } from "antd";
+import { Avatar, Col, Icon, Menu, Row } from "antd";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import CurrentUserDropdown from "../current-user-dropdown/current-user-dropdown.component";
-import GlobalSearch from "../global-search/global-search.component";
+import UserImage from "../../assets/User.svg";
+import { signOutStart } from "../../redux/user/user.actions";
 import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";
 
-export default ({ landingHeader, selectedNavItem }) => {
+export default ({
+  landingHeader,
+  selectedNavItem,
+  logo,
+  handleMenuClick,
+  currentUser
+}) => {
   const { t } = useTranslation();
-
+  //TODO Add
   return (
-    <Row type="flex" justify="space-around">
-      <Col span={16}>
+    <Row type="flex" justify="space-around" align="middle">
+      {logo ? (
+        <Col span={4}>
+          <img alt="Shop Logo" src={logo} style={{ height: "40px" }} />
+        </Col>
+      ) : null}
+      <Col span={14}>
         <Menu
           theme="dark"
           className="header"
           selectedKeys={selectedNavItem}
           mode="horizontal"
+          onClick={handleMenuClick}
         >
-          <Menu.Item>
-            <GlobalSearch />
-          </Menu.Item>
-
           <Menu.Item key="home">
             <Link to="/manage">
               <Icon type="home" />
@@ -64,16 +72,47 @@ export default ({ landingHeader, selectedNavItem }) => {
             </Menu.Item>
           </Menu.SubMenu>
 
-          {!landingHeader ? null : (
-            <Menu.Item>
-              <ManageSignInButton />
+          <Menu.SubMenu
+            title={
+              <div>
+                <Avatar
+                  size="medium"
+                  alt="Avatar"
+                  src={currentUser.photoURL ? currentUser.photoURL : UserImage}
+                  style={{ margin: "10px" }}
+                />
+                {currentUser.displayName || t("general.labels.unknown")}
+              </div>
+            }
+          >
+            <Menu.Item onClick={signOutStart()}>
+              {t("user.actions.signout")}
             </Menu.Item>
-          )}
+            <Menu.Item>
+              <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
+            </Menu.Item>
+            <Menu.SubMenu
+              title={
+                <span>
+                  <Icon type="global" />
+                  <span>{t("menus.currentuser.languageselector")}</span>
+                </span>
+              }
+            >
+              <Menu.Item actiontype="lang-select" key="en_us">
+                {t("general.languages.english")}
+              </Menu.Item>
+              <Menu.Item actiontype="lang-select" key="fr">
+                {t("general.languages.french")}
+              </Menu.Item>
+              <Menu.Item actiontype="lang-select" key="es">
+                {t("general.languages.spanish")}
+              </Menu.Item>
+            </Menu.SubMenu>
+          </Menu.SubMenu>
         </Menu>
       </Col>
-      <Col span={6} offset={2}>
-        {!landingHeader ? <CurrentUserDropdown /> : null}
-      </Col>
+      <Col span={4}>{!landingHeader ? null : <ManageSignInButton />}</Col>
     </Row>
   );
 };