From 99cd3ed111f35d77127c2ba28789b33b977537f2 Mon Sep 17 00:00:00 2001
From: Sabina Talipova <sabina.talipova@silverstripe.com>
Date: Fri, 25 Feb 2022 10:54:59 +1300
Subject: [PATCH] New logic for breadcrumbs

---
 client/src/components/HeaderComponent.js | 18 ++++++++++++++++--
 client/src/components/LeftAndMain.js     |  4 ++--
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/client/src/components/HeaderComponent.js b/client/src/components/HeaderComponent.js
index 3730d99..f13bb72 100644
--- a/client/src/components/HeaderComponent.js
+++ b/client/src/components/HeaderComponent.js
@@ -2,11 +2,25 @@ import React from 'react';
 import Toolbar from 'components/Toolbar/Toolbar';
 import { Component as Breadcrumb } from 'components/Breadcrumb/Breadcrumb';
 
-const HeaderComponent = ({ breadcrumbs }) => {
+const HeaderComponent = ({ breadcrumbs, currentPath }) => {
+
+    const breadcrumb = () => {
+        const urlSegments = window.location.pathname.split('/');
+        let crumbs = [];
+        breadcrumbs.forEach(breadcrumb => {
+            let crumb = {}
+            if (urlSegments.includes(breadcrumb.href)) {
+                crumb.text = breadcrumb.text
+                crumb.href = `${currentPath}/${breadcrumb.href}`;
+                crumbs.push(crumb);
+            }
+        });
+        return crumbs;
+    }
 
     return (
         <Toolbar className="fill-width">
-            <Breadcrumb multiline crumbs={breadcrumbs} />
+            <Breadcrumb multiline crumbs={breadcrumb()} />
         </Toolbar>
     );
 };
diff --git a/client/src/components/LeftAndMain.js b/client/src/components/LeftAndMain.js
index ce6419e..60a0306 100644
--- a/client/src/components/LeftAndMain.js
+++ b/client/src/components/LeftAndMain.js
@@ -12,10 +12,10 @@ import ActionBar from "./ActionBar";
  * @returns {JSX.Element}
  * @constructor
  */
-const LeftAndMain = ({ children, topActions, bottomActions, breadcrumbs }) => {
+const LeftAndMain = ({ children, topActions, bottomActions, breadcrumbs, currentPath }) => {
   return (
     <div className="left-and-main fill-height">
-      <HeaderComponent breadcrumbs={breadcrumbs} />
+      <HeaderComponent breadcrumbs={breadcrumbs} currentPath={currentPath} />
       <div className="panel panel--padded panel--scrollable">
         {topActions.length > 0 && <ActionBar actions={topActions} />}
         {children}