breadcrumbs with inital home-link

src/components/Breadcrumbs.js

@@ -1,27 +1,49 @@
 import React, { Component } from 'react';
 
 import { Link } from 'react-router-dom';
+import clsx from 'clsx';
 
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import { withStyles } from '@material-ui/core/styles';
+import MaterialUIBreadcrumbs from '@material-ui/core/Breadcrumbs';
 import Typography from '@material-ui/core/Typography';
 
-class MyBreadcrumbs extends Component {
+import { faHome } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+const styles = (theme) => ({
+  home: {
+    color: theme.palette.secondary.main,
+    width: '20px !important',
+    height: '20px',
+    marginTop: '2px'
+  },
+  hover: {
+    '&:hover': {
+      color: theme.palette.primary.main
+    }
+  }
+});
+
+class Breadcrumbs extends Component {
   render() {
     return (
-      this.props.content && this.props.content.length > 1 ?
-        <Breadcrumbs separator="›" style={{marginBottom: '20px'}}>
+      this.props.content && this.props.content.length > 0 ?
+        <MaterialUIBreadcrumbs separator="›" style={{marginBottom: '20px'}}>
+          <Link to={'/'} style={{textDecoration: 'none'}}>
+            <FontAwesomeIcon className={clsx(this.props.classes.home, this.props.classes.hover)} icon={faHome} size="xs"/>
+          </Link>
           {this.props.content.splice(0, this.props.content.length-1).map((content, i) => (
             <Link to={content.link} style={{textDecoration: 'none'}} key={i}>
-              <Typography color="secondary">{content.title}</Typography>
+              <Typography className={this.props.classes.hover} color="secondary">{content.title}</Typography>
             </Link>
           ))}
           <Typography color="textPrimary" style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: '300px'}}>
             {this.props.content.slice(-1)[0].title}
           </Typography>
-        </Breadcrumbs>
+        </MaterialUIBreadcrumbs>
       : null
     );
   };
 }
 
-export default MyBreadcrumbs;
+export default withStyles(styles, {withTheme: true})(Breadcrumbs);

src/components/NotFound.js

@@ -11,7 +11,7 @@ class NotFound extends Component {
   render() {
     return (
       <div>
-        <Breadcrumbs content={[{link: '/', title: 'Home'}, {link: this.props.location.pathname, title: 'Error'}]}/>
+        <Breadcrumbs content={[{link: this.props.location.pathname, title: 'Error'}]}/>
         <Typography variant='h4' style={{marginBottom: '5px'}}>Die von Ihnen angeforderte Seite kann nicht gefunden werden.</Typography>
         <Typography variant='body1'>Die gesuchte Seite wurde möglicherweise entfernt, ihr Name wurde geändert oder sie ist vorübergehend nicht verfügbar.</Typography>
         {this.props.button ?

src/components/Tutorial/Tutorial.js

@@ -46,7 +46,7 @@ class Tutorial extends Component {
         <NotFound button={{title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial'}}/>
       :
       <div>
-        <Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}, {link: `/tutorial/${currentTutorialId}`, title: tutorial.title}]}/>
+        <Breadcrumbs content={[{link: '/tutorial', title: 'Tutorial'}, {link: `/tutorial/${currentTutorialId}`, title: tutorial.title}]}/>
 
         <StepperHorizontal />
 

src/components/Tutorial/TutorialHome.js

@@ -54,7 +54,7 @@ class TutorialHome extends Component {
   render() {
     return (
       <div>
-        <Breadcrumbs content={[{link: '/', title: 'Home'},{link: '/tutorial', title: 'Tutorial'}]}/>
+        <Breadcrumbs content={[{link: '/tutorial', title: 'Tutorial'}]}/>
 
         <h1>Tutorial-Übersicht</h1>
         <Grid container spacing={2}>