From 1263ad3390ae5768b87dc959183b13a0aee0f4fc Mon Sep 17 00:00:00 2001
From: PA4KEV <kevin.vd.vleuten@gmail.com>
Date: Sat, 17 Feb 2024 21:23:27 +0100
Subject: [PATCH] Add language and theme to breadcrumbs.

---
 src/UI/Breadcrumbs.js | 32 +++++++++++++++++++-------------
 src/overrides.scss    |  8 ++++++++
 2 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/UI/Breadcrumbs.js b/src/UI/Breadcrumbs.js
index c981fa8..02631ef 100644
--- a/src/UI/Breadcrumbs.js
+++ b/src/UI/Breadcrumbs.js
@@ -1,10 +1,14 @@
 import React from 'react';
+import { getLanguage } from '../App';
+import { useTheme } from '../ThemeContext';
 
 const Breadcrumbs = ({ separator, path, children }) => {
+    const { theme } = useTheme();
+    const language = getLanguage();
     const items = React.Children.toArray(children);
 
     const generatePath = (index) => {
-        return path.split('/').slice(0, index + 1).join('/');
+        return '/' + language + '/' + path.split('/').slice(0, index + 1).join('/');
     };
 
     if (items.length !== path.split('/').length) {
@@ -12,18 +16,20 @@ const Breadcrumbs = ({ separator, path, children }) => {
     }
 
     return (
-        <div className='breadcrumbs'>
-            {items.map((item, index) => (
-                <React.Fragment key={index}>
-                    {index > 0 && <span className='separator'>{separator}</span>}
-                    {index < items.length - 1 ? (
-                        <a href={generatePath(index)}>{item}</a>
-                    ) : (
-                        <a href={generatePath(index)}>{item}</a>
-                    )}
-                </React.Fragment>
-            ))}
-        </div>
+        <div className={`breadcrumbs`}>
+            {
+                items.map((item, index) => (
+                    <React.Fragment key={index}>
+                        {index > 0 && <span className='separator'>{separator}</span>}
+                        {index < items.length - 1 ? (
+                            <a className={`small text-${theme}`} href={generatePath(index)}>{item}</a>
+                        ) : (
+                            <a className={`small text-${theme}`} href={generatePath(index)}>{item}</a>
+                        )}
+                    </React.Fragment>
+                ))
+            }
+        </div >
     )
 }
 
diff --git a/src/overrides.scss b/src/overrides.scss
index 092bedf..f6bb60e 100644
--- a/src/overrides.scss
+++ b/src/overrides.scss
@@ -90,6 +90,14 @@ body.light {
   width: 65%;
 }
 
+.breadcrumbs a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
 // Core variables and mixins
 // @import "variables";
 // @import "mixins";
\ No newline at end of file