Moved recent items to header BOD-200

client/src/components/breadcrumbs/breadcrumbs.component.jsx

@@ -1,41 +1,19 @@
-import { HomeFilled, ClockCircleFilled } from "@ant-design/icons";
-import { Breadcrumb, Menu, Dropdown } from "antd";
+import { HomeFilled } from "@ant-design/icons";
+import { Breadcrumb } from "antd";
 import React from "react";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
-import {
-  selectBreadcrumbs,
-  selectRecentItems,
-} from "../../redux/application/application.selectors";
+import { selectBreadcrumbs } from "../../redux/application/application.selectors";
 import "./breadcrumbs.styles.scss";
 
 const mapStateToProps = createStructuredSelector({
   breadcrumbs: selectBreadcrumbs,
-  recentItems: selectRecentItems,
 });
 
-export function BreadCrumbs({ breadcrumbs, recentItems }) {
-  const menu = (
-    <Menu>
-      {recentItems.map((i, idx) => (
-        <Menu.Item key={idx}>
-          <Link to={i.url}>{i.label}</Link>
-        </Menu.Item>
-      ))}
-    </Menu>
-  );
-
+export function BreadCrumbs({ breadcrumbs }) {
   return (
     <div className="breadcrumb-container imex-flex-row">
-      <Dropdown
-        className="imex-flex-row__margin-large"
-        overlay={menu}
-        trigger={["click"]}
-      >
-        <ClockCircleFilled onClick={(e) => e.preventDefault()} />
-      </Dropdown>
-
       <Breadcrumb separator=">">
         <Breadcrumb.Item>
           <Link to={`/manage`}>

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

@@ -1,4 +1,5 @@
 import Icon, {
+  ClockCircleFilled,
   CarFilled,
   DollarCircleFilled,
   FileAddFilled,
@@ -23,10 +24,12 @@ import {
 } from "../../redux/user/user.selectors";
 import "./header.styles.scss";
 import GlobalSearch from "../global-search/global-search.component";
+import { selectRecentItems } from "../../redux/application/application.selectors";
 
 const mapStateToProps = createStructuredSelector({
   currentUser: selectCurrentUser,
   bodyshop: selectBodyshop,
+  recentItems: selectRecentItems,
 });
 
 const mapDispatchToProps = (dispatch) => ({
@@ -71,6 +74,7 @@ function Header({
   setInvoiceEnterContext,
   setTimeTicketContext,
   setPaymentContext,
+  recentItems,
 }) {
   const { t } = useTranslation();
   const { Header } = Layout;
@@ -283,6 +287,13 @@ function Header({
             <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>