From 31ddf8efa4595166c7154256590f13a7621fb140 Mon Sep 17 00:00:00 2001
From: Michael Krasnov <mihalKrasnov@gmail.com>
Date: Wed, 8 Jan 2025 14:32:09 -0500
Subject: [PATCH] BACKLOG-23413 Using small breadcrumbs dropdown in edit boxes
 in PC

---
 src/javascript/JContent/EditFrame/Box.jsx     |  2 +-
 .../EditFrame/Breadcrumbs/Breadcrumbs.jsx     | 43 ++++++-------------
 2 files changed, 15 insertions(+), 30 deletions(-)

diff --git a/src/javascript/JContent/EditFrame/Box.jsx b/src/javascript/JContent/EditFrame/Box.jsx
index aabc4c2e1..0b56b024c 100644
--- a/src/javascript/JContent/EditFrame/Box.jsx
+++ b/src/javascript/JContent/EditFrame/Box.jsx
@@ -239,7 +239,7 @@ export const Box = React.memo(({
                          jahiatype="footer" // eslint-disable-line react/no-unknown-property
                          onClick={onClick}
                     >
-                        <Breadcrumbs nodes={breadcrumbs} isResponsiveMode={element.getBoundingClientRect().width < 350} setCurrentElement={setCurrentElement} onSelect={onSelect}/>
+                        <Breadcrumbs nodes={breadcrumbs} setCurrentElement={setCurrentElement} onSelect={onSelect}/>
                     </div>}
             </div>
         </div>
diff --git a/src/javascript/JContent/EditFrame/Breadcrumbs/Breadcrumbs.jsx b/src/javascript/JContent/EditFrame/Breadcrumbs/Breadcrumbs.jsx
index 47627df84..b0948006a 100644
--- a/src/javascript/JContent/EditFrame/Breadcrumbs/Breadcrumbs.jsx
+++ b/src/javascript/JContent/EditFrame/Breadcrumbs/Breadcrumbs.jsx
@@ -1,11 +1,11 @@
 import React, {useCallback} from 'react';
 import PropTypes from 'prop-types';
-import {Breadcrumb, BreadcrumbItem, Dropdown} from '@jahia/moonstone';
+import {Dropdown} from '@jahia/moonstone';
 import {useTranslation} from 'react-i18next';
 import {shallowEqual, useSelector} from 'react-redux';
 import {NodeIcon} from '~/utils';
 
-export const Breadcrumbs = ({nodes, setCurrentElement, onSelect, isResponsiveMode}) => {
+export const Breadcrumbs = ({nodes, setCurrentElement, onSelect}) => {
     const {t} = useTranslation('jcontent');
     const {selection} = useSelector(state => ({
         selection: state.jcontent.selection
@@ -26,39 +26,24 @@ export const Breadcrumbs = ({nodes, setCurrentElement, onSelect, isResponsiveMod
         return false;
     }, [onSelect, selection.length, setCurrentElement]);
 
-    if (isResponsiveMode) {
-        const data = nodes.map(n => ({
-            label: n.name,
-            value: n.path,
-            image: <NodeIcon node={n}/>
-        }));
-
-        return (
-            <Dropdown data={data}
-                      placeholder={t('jcontent:label.contentManager.pageBuilder.breadcrumbs.dropdownLabel')}
-                      onChange={(e, v) => {
-                          handleItemOnClick(e, v.value);
-                      }}
-            />
-        );
-    }
+    const data = nodes.toReversed().map((n, index) => ({
+        label: n.name,
+        value: n.path,
+        image: <NodeIcon node={n} style={{marginLeft: 8 * index}}/>
+    }));
 
     return (
-        <Breadcrumb data-sel-role="pagebuilder-breadcrumb">
-            {nodes.map(n => (
-                <BreadcrumbItem key={n.path}
-                                label={n.name}
-                                icon={<NodeIcon node={n}/>}
-                                onClick={event => handleItemOnClick(event, n.path)}
-                />
-            ))}
-        </Breadcrumb>
+        <Dropdown data={data}
+                  placeholder={t('jcontent:label.contentManager.pageBuilder.breadcrumbs.dropdownLabel')}
+                  onChange={(e, v) => {
+                      handleItemOnClick(e, v.value);
+                  }}
+        />
     );
 };
 
 Breadcrumbs.propTypes = {
     nodes: PropTypes.array,
     setCurrentElement: PropTypes.func,
-    onSelect: PropTypes.func,
-    isResponsiveMode: PropTypes.bool
+    onSelect: PropTypes.func
 };