kevin/portfolio
1
0
Fork 0
Code

Add language and theme to breadcrumbs.

Browse Source
This commit is contained in:
PA4KEV 2024-02-17 21:23:27 +01:00
parent 50dce801a2
commit 1263ad3390
2 changed files with 27 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/UI/Breadcrumbs.js
View File

@ -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) => (
<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 className={`small text-${theme}`} href={generatePath(index)}>{item}</a>
) : (
<a href={generatePath(index)}>{item}</a>
<a className={`small text-${theme}`} href={generatePath(index)}>{item}</a>
)}
</React.Fragment>
))}
</div>
))
}
</div >
)
}

8
src/overrides.scss
View File

@ -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";