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

32
src/UI/Breadcrumbs.js
View File

@ -1,10 +1,14 @@
import React from 'react'; import React from 'react';
import { getLanguage } from '../App';
import { useTheme } from '../ThemeContext';
const Breadcrumbs = ({ separator, path, children }) => { const Breadcrumbs = ({ separator, path, children }) => {
const { theme } = useTheme();
const language = getLanguage();
const items = React.Children.toArray(children); const items = React.Children.toArray(children);
const generatePath = (index) => { 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) { if (items.length !== path.split('/').length) {
@ -12,18 +16,20 @@ const Breadcrumbs = ({ separator, path, children }) => {
} }
return ( return (
<div className='breadcrumbs'> <div className={`breadcrumbs`}>
{items.map((item, index) => ( {
<React.Fragment key={index}> items.map((item, index) => (
{index > 0 && <span className='separator'>{separator}</span>} <React.Fragment key={index}>
{index < items.length - 1 ? ( {index > 0 && <span className='separator'>{separator}</span>}
<a href={generatePath(index)}>{item}</a> {index < items.length - 1 ? (
) : ( <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> )}
))} </React.Fragment>
</div> ))
}
</div >
) )
} }

8
src/overrides.scss
View File

@ -90,6 +90,14 @@ body.light {
width: 65%; width: 65%;
} }
.breadcrumbs a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
// Core variables and mixins // Core variables and mixins
// @import "variables"; // @import "variables";
// @import "mixins"; // @import "mixins";