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

import Icon, { CarFilled, FileAddFilled, FileFilled, GlobalOutlined, HomeFilled, TeamOutlined } from "@ant-design/icons";
import { Avatar, Col, Menu, Row } from "antd";
import React from "react";
import { useTranslation } from "react-i18next";
import { FaCalendarAlt, FaCarCrash } from "react-icons/fa";
import { Link } from "react-router-dom";
import UserImage from "../../assets/User.svg";
import ManageSignInButton from "../manage-sign-in-button/manage-sign-in-button.component";

export default ({
  landingHeader,
  selectedNavItem,
  logo,
  handleMenuClick,
  currentUser,
  signOutStart
}) => {
  const { t } = useTranslation();
  //TODO Add

  return (
    <Row type="flex" justify="space-around" align="middle">
      {logo ? (
        <Col span={3}>
          <img alt="Shop Logo" src={logo} style={{ height: "40px" }} />
        </Col>
      ) : null}
      <Col span={14}>
        {landingHeader ? (
          <Menu
            theme="dark"
            className="header"
            selectedKeys={selectedNavItem}
            mode="horizontal"
            onClick={handleMenuClick}
          >
            <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>
                    <GlobalOutlined />
                    <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>
        ) : (
          <Menu
            theme="dark"
            className="header"
            selectedKeys={selectedNavItem}
            mode="horizontal"
            onClick={handleMenuClick}
          >
            <Menu.Item key="home">
              <Link to="/manage">
                <HomeFilled />
                {t("menus.header.home")}
              </Link>
            </Menu.Item>
            <Menu.SubMenu
              title={
                <span>
                  <Icon component={FaCarCrash} />
                  <span>{t("menus.header.jobs")}</span>
                </span>
              }
            >
              <Menu.Item key="schedule">
                <Link to="/manage/schedule">
                  <Icon component={FaCalendarAlt} />
                  {t("menus.header.schedule")}
                </Link>
              </Menu.Item>
              <Menu.Item key="activejobs">
                <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
              </Menu.Item>
              <Menu.Item key="availablejobs">
                <Link to="/manage/available">
                  {t("menus.header.availablejobs")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>
            <Menu.SubMenu title={t("menus.header.customers")}>
              <Menu.Item key="owners">
                <Link to="/manage/owners">
                  <TeamOutlined />
                  {t("menus.header.owners")}
                </Link>
              </Menu.Item>
              <Menu.Item key="vehicles">
                <Link to="/manage/vehicles">
                  <CarFilled />
                  {t("menus.header.vehicles")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>

            <Menu.SubMenu
              title={
                <span>
                  <CarFilled />
                  <span>{t("menus.header.courtesycars")}</span>
                </span>
              }
            >
              <Menu.Item key="courtesycarsall">
                <Link to="/manage/courtesycars">
                  <CarFilled />
                  {t("menus.header.courtesycars-all")}
                </Link>
              </Menu.Item>
              <Menu.Item key="contracts">
                <Link to="/manage/courtesycars/contracts">
                  <FileFilled />
                  {t("menus.header.courtesycars-contracts")}
                </Link>
              </Menu.Item>
              <Menu.Item key="newcontract">
                <Link to="/manage/courtesycars/contracts/new">
                  <FileAddFilled />
                  {t("menus.header.courtesycars-newcontract")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>

            <Menu.SubMenu title={t("menus.header.shop")}>
              <Menu.Item key="shop">
                <Link to="/manage/shop">{t("menus.header.shop_config")}</Link>
              </Menu.Item>
              <Menu.Item key="shop-vendors">
                <Link to="/manage/shop/vendors">
                  {t("menus.header.shop_vendors")}
                </Link>
              </Menu.Item>
            </Menu.SubMenu>

            <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>
                    <GlobalOutlined />
                    <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>
    </Row>
  );
};