From a64ad8f7321cf718b3283377308efb0044373ca3 Mon Sep 17 00:00:00 2001
From: Patrick Fic <>
Date: Tue, 19 Jan 2021 17:07:17 -0800
Subject: [PATCH] Updated header.

---
 .../components/header/header.component.jsx    | 536 +++++++++---------
 .../src/components/header/header.styles.scss  |   9 -
 2 files changed, 272 insertions(+), 273 deletions(-)
 delete mode 100644 client/src/components/header/header.styles.scss

diff --git a/client/src/components/header/header.component.jsx b/client/src/components/header/header.component.jsx
index f1f65bc68..347a77eb9 100644
--- a/client/src/components/header/header.component.jsx
+++ b/client/src/components/header/header.component.jsx
@@ -10,9 +10,9 @@ import Icon, {
   LineChartOutlined,
   ScheduleOutlined,
   TeamOutlined,
+  ToolFilled,
   UnorderedListOutlined,
   UserOutlined,
-  ToolFilled,
 } from "@ant-design/icons";
 import { Avatar, Menu } from "antd";
 import React from "react";
@@ -35,8 +35,6 @@ import { setModalContext } from "../../redux/modals/modals.actions";
 import { signOutStart } from "../../redux/user/user.actions";
 import { selectCurrentUser } from "../../redux/user/user.selectors";
 import GlobalSearch from "../global-search/global-search.component";
-import "./header.styles.scss";
-
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   recentItems: selectRecentItems,
@@ -66,282 +64,292 @@ function Header({
   const { t } = useTranslation();
 
   return (
-    <Menu
-      mode="horizontal"
-      theme="dark"
-      // style={{ backgroundColor: "#eee" }}
-      className="header-main-menu"
-      selectedKeys={[selectedHeader]}
-      onClick={handleMenuClick}
-    >
-      <Menu.Item key="home">
-        <Link to="/manage">
-          <HomeFilled />
-          {t("menus.header.home")}
-        </Link>
-      </Menu.Item>
-      <Menu.Item key="schedule">
-        <Link to="/manage/schedule">
-          <Icon component={FaCalendarAlt} />
-          {t("menus.header.schedule")}
-        </Link>
-      </Menu.Item>
-      <Menu.SubMenu
-        title={
-          <span>
-            <Icon component={FaCarCrash} />
-            <span>{t("menus.header.jobs")}</span>
-          </span>
-        }
+    <div style={{ display: "flex" }}>
+      <Menu
+        mode="horizontal"
+        theme="dark"
+        style={{ flex: 1 }}
+        className="header-main-menu"
+        selectedKeys={[selectedHeader]}
+        onClick={handleMenuClick}
       >
-        <Menu.Item key="activejobs">
-          <FileFilled />
-          <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
-        </Menu.Item>
-        <Menu.Item key="parts-queue">
-          <Link to="/manage/partsqueue">
-            <ToolFilled /> {t("menus.header.parts-queue")}
+        <Menu.Item key="home">
+          <Link to="/manage">
+            <HomeFilled />
+            {t("menus.header.home")}
           </Link>
         </Menu.Item>
-        <Menu.Item key="availablejobs">
-          <Link to="/manage/available">
-            <ImportOutlined /> {t("menus.header.availablejobs")}
+        <Menu.Item key="schedule">
+          <Link to="/manage/schedule">
+            <Icon component={FaCalendarAlt} />
+            {t("menus.header.schedule")}
           </Link>
         </Menu.Item>
-        <Menu.Divider />
-        <Menu.Item key="alljobs">
-          <UnorderedListOutlined />
-          <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
-        </Menu.Item>
-        <Menu.Divider />
-
-        <Menu.Item key="productionlist">
-          <Link to="/manage/production/list">
-            <ScheduleOutlined />
-            {t("menus.header.productionlist")}
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="productionboard">
-          <Link to="/manage/production/board">
-            <Icon component={BsKanban} />
-            {t("menus.header.productionboard")}
-          </Link>
-        </Menu.Item>
-        <Menu.Divider />
-
-        <Menu.Item key="scoreboard">
-          <LineChartOutlined />
-          <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
-        </Menu.Item>
-      </Menu.SubMenu>
-      <Menu.SubMenu
-        title={
-          <span>
-            <UserOutlined />
-            <span>{t("menus.header.customers")}</span>
-          </span>
-        }
-      >
-        <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={
-          <span>
-            <DollarCircleFilled />
-            <span>{t("menus.header.accounting")}</span>
-          </span>
-        }
-      >
-        <Menu.Item key="bills">
-          <Link to="/manage/bills">{t("menus.header.bills")}</Link>
-        </Menu.Item>
-        <Menu.Item
-          key="enterbills"
-          onClick={() => {
-            setBillEnterContext({
-              actions: {},
-              context: {},
-            });
-          }}
-        >
-          <Icon component={FaFileInvoiceDollar} />
-          {t("menus.header.enterbills")}
-        </Menu.Item>
-        <Menu.Divider />
-        <Menu.Item key="allpayments">
-          <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
-        </Menu.Item>
-        <Menu.Item
-          key="enterpayments"
-          onClick={() => {
-            setPaymentContext({
-              actions: {},
-              context: null,
-            });
-          }}
-        >
-          <Icon component={FaCreditCard} />
-          {t("menus.header.enterpayment")}
-        </Menu.Item>
-        <Menu.Divider />
-
-        <Menu.Item key="timetickets">
-          <Link to="/manage/timetickets">{t("menus.header.timetickets")}</Link>
-        </Menu.Item>
-        <Menu.Item
-          key="entertimetickets"
-          onClick={() => {
-            setTimeTicketContext({
-              actions: {},
-              context: {},
-            });
-          }}
-        >
-          {t("menus.header.entertimeticket")}
-        </Menu.Item>
-        <Menu.Divider />
-
-        <Menu.SubMenu title={t("menus.header.export")}>
-          <Menu.Item key="receivables">
-            <Link to="/manage/accounting/receivables">
-              {t("menus.header.accounting-receivables")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="payables">
-            <Link to="/manage/accounting/payables">
-              {t("menus.header.accounting-payables")}
-            </Link>
-          </Menu.Item>
-          <Menu.Item key="payments">
-            <Link to="/manage/accounting/payments">
-              {t("menus.header.accounting-payments")}
-            </Link>
-          </Menu.Item>
-        </Menu.SubMenu>
-      </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-templates">
-          <Link to="/manage/shop/templates">
-            {t("menus.header.shop_templates")}
-          </Link>
-        </Menu.Item>
-
-        <Menu.Item key="shop-vendors">
-          <Link to="/manage/shop/vendors">
-            {t("menus.header.shop_vendors")}
-          </Link>
-        </Menu.Item>
-        <Menu.Item key="shop-csi">
-          <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
-        </Menu.Item>
-      </Menu.SubMenu>
-      <Menu.Item>
-        <GlobalSearch />
-      </Menu.Item>
-      <Menu.SubMenu title={<ClockCircleFilled />}>
-        {recentItems.map((i, idx) => (
-          <Menu.Item key={idx}>
-            <Link to={i.url}>{i.label}</Link>
-          </Menu.Item>
-        ))}
-      </Menu.SubMenu>
-      <Menu.SubMenu
-        title={
-          <div>
-            {currentUser.photoURL ? (
-              <Avatar
-                src={currentUser.photoURL}
-                style={{
-                  margin: "10px",
-                }}
-              />
-            ) : (
-              <Avatar
-                style={{
-                  backgroundColor: "#87d068",
-                  margin: "10px",
-                }}
-                icon={<UserOutlined />}
-              />
-            )}
-
-            {currentUser.displayName ||
-              currentUser.email ||
-              t("general.labels.unknown")}
-          </div>
-        }
-      >
-        <Menu.Item danger onClick={() => signOutStart()}>
-          {t("user.actions.signout")}
-        </Menu.Item>
-        <Menu.Item key="shiftclock">
-          <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
-        </Menu.Item>
-        <Menu.Item key="profile">
-          <Link to="/manage/profile">{t("menus.currentuser.profile")}</Link>
-        </Menu.Item>
         <Menu.SubMenu
           title={
             <span>
-              <GlobalOutlined />
-              <span>{t("menus.currentuser.languageselector")}</span>
+              <Icon component={FaCarCrash} />
+              <span>{t("menus.header.jobs")}</span>
             </span>
           }
         >
-          <Menu.Item actiontype="lang-select" key="en-US">
-            {t("general.languages.english")}
+          <Menu.Item key="activejobs">
+            <FileFilled />
+            <Link to="/manage/jobs">{t("menus.header.activejobs")}</Link>
           </Menu.Item>
-          <Menu.Item actiontype="lang-select" key="fr-CA">
-            {t("general.languages.french")}
+          <Menu.Item key="parts-queue">
+            <Link to="/manage/partsqueue">
+              <ToolFilled /> {t("menus.header.parts-queue")}
+            </Link>
           </Menu.Item>
-          <Menu.Item actiontype="lang-select" key="es-MX">
-            {t("general.languages.spanish")}
+          <Menu.Item key="availablejobs">
+            <Link to="/manage/available">
+              <ImportOutlined /> {t("menus.header.availablejobs")}
+            </Link>
+          </Menu.Item>
+          <Menu.Divider />
+          <Menu.Item key="alljobs">
+            <UnorderedListOutlined />
+            <Link to="/manage/jobs/all">{t("menus.header.alljobs")}</Link>
+          </Menu.Item>
+          <Menu.Divider />
+
+          <Menu.Item key="productionlist">
+            <Link to="/manage/production/list">
+              <ScheduleOutlined />
+              {t("menus.header.productionlist")}
+            </Link>
+          </Menu.Item>
+          <Menu.Item key="productionboard">
+            <Link to="/manage/production/board">
+              <Icon component={BsKanban} />
+              {t("menus.header.productionboard")}
+            </Link>
+          </Menu.Item>
+          <Menu.Divider />
+
+          <Menu.Item key="scoreboard">
+            <LineChartOutlined />
+            <Link to="/manage/scoreboard">{t("menus.header.scoreboard")}</Link>
           </Menu.Item>
         </Menu.SubMenu>
-      </Menu.SubMenu>
-    </Menu>
+        <Menu.SubMenu
+          title={
+            <span>
+              <UserOutlined />
+              <span>{t("menus.header.customers")}</span>
+            </span>
+          }
+        >
+          <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={
+            <span>
+              <DollarCircleFilled />
+              <span>{t("menus.header.accounting")}</span>
+            </span>
+          }
+        >
+          <Menu.Item key="bills">
+            <Link to="/manage/bills">{t("menus.header.bills")}</Link>
+          </Menu.Item>
+          <Menu.Item
+            key="enterbills"
+            onClick={() => {
+              setBillEnterContext({
+                actions: {},
+                context: {},
+              });
+            }}
+          >
+            <Icon component={FaFileInvoiceDollar} />
+            {t("menus.header.enterbills")}
+          </Menu.Item>
+          <Menu.Divider />
+          <Menu.Item key="allpayments">
+            <Link to="/manage/payments">{t("menus.header.allpayments")}</Link>
+          </Menu.Item>
+          <Menu.Item
+            key="enterpayments"
+            onClick={() => {
+              setPaymentContext({
+                actions: {},
+                context: null,
+              });
+            }}
+          >
+            <Icon component={FaCreditCard} />
+            {t("menus.header.enterpayment")}
+          </Menu.Item>
+          <Menu.Divider />
+
+          <Menu.Item key="timetickets">
+            <Link to="/manage/timetickets">
+              {t("menus.header.timetickets")}
+            </Link>
+          </Menu.Item>
+          <Menu.Item
+            key="entertimetickets"
+            onClick={() => {
+              setTimeTicketContext({
+                actions: {},
+                context: {},
+              });
+            }}
+          >
+            {t("menus.header.entertimeticket")}
+          </Menu.Item>
+          <Menu.Divider />
+
+          <Menu.SubMenu title={t("menus.header.export")}>
+            <Menu.Item key="receivables">
+              <Link to="/manage/accounting/receivables">
+                {t("menus.header.accounting-receivables")}
+              </Link>
+            </Menu.Item>
+            <Menu.Item key="payables">
+              <Link to="/manage/accounting/payables">
+                {t("menus.header.accounting-payables")}
+              </Link>
+            </Menu.Item>
+            <Menu.Item key="payments">
+              <Link to="/manage/accounting/payments">
+                {t("menus.header.accounting-payments")}
+              </Link>
+            </Menu.Item>
+          </Menu.SubMenu>
+        </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-templates">
+            <Link to="/manage/shop/templates">
+              {t("menus.header.shop_templates")}
+            </Link>
+          </Menu.Item>
+
+          <Menu.Item key="shop-vendors">
+            <Link to="/manage/shop/vendors">
+              {t("menus.header.shop_vendors")}
+            </Link>
+          </Menu.Item>
+          <Menu.Item key="shop-csi">
+            <Link to="/manage/shop/csi">{t("menus.header.shop_csi")}</Link>
+          </Menu.Item>
+        </Menu.SubMenu>
+      </Menu>
+      <GlobalSearch />
+      <Menu
+        mode="horizontal"
+        theme="dark"
+        className="header-main-menu"
+        selectedKeys={[selectedHeader]}
+        onClick={handleMenuClick}
+      >
+        <Menu.SubMenu
+          title={
+            <div>
+              {currentUser.photoURL ? (
+                <Avatar
+                  src={currentUser.photoURL}
+                  style={{
+                    margin: "10px",
+                  }}
+                />
+              ) : (
+                <Avatar
+                  style={{
+                    backgroundColor: "#87d068",
+                    margin: "10px",
+                  }}
+                  icon={<UserOutlined />}
+                />
+              )}
+
+              {currentUser.displayName ||
+                currentUser.email ||
+                t("general.labels.unknown")}
+            </div>
+          }
+        >
+          <Menu.Item danger onClick={() => signOutStart()}>
+            {t("user.actions.signout")}
+          </Menu.Item>
+          <Menu.Item key="shiftclock">
+            <Link to="/manage/shiftclock">{t("menus.header.shiftclock")}</Link>
+          </Menu.Item>
+          <Menu.Item key="profile">
+            <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-CA">
+              {t("general.languages.french")}
+            </Menu.Item>
+            <Menu.Item actiontype="lang-select" key="es-MX">
+              {t("general.languages.spanish")}
+            </Menu.Item>
+          </Menu.SubMenu>
+        </Menu.SubMenu>
+        <Menu.SubMenu title={<ClockCircleFilled />}>
+          {recentItems.map((i, idx) => (
+            <Menu.Item key={idx}>
+              <Link to={i.url}>{i.label}</Link>
+            </Menu.Item>
+          ))}
+        </Menu.SubMenu>
+      </Menu>
+    </div>
   );
 }
 
diff --git a/client/src/components/header/header.styles.scss b/client/src/components/header/header.styles.scss
deleted file mode 100644
index ed2aed346..000000000
--- a/client/src/components/header/header.styles.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.header-shop-logo {
-  background-size: cover;
-  max-width: 100%;
-  max-height: 3.5rem;
-}
-.header-main-menu {
-  //width: 95vw;
-  //float: left;
-}