added return to home component

src/App.tsx

@@ -15,6 +15,6 @@ const App = () => {
             <Matas></Matas>
         </MuiThemeProvider>
     );
-}
+};
 
 export default App;

src/Matas/Matas.tsx

@@ -42,11 +42,16 @@ class Matas extends React.Component<any, MatasState> {
         this.setState({isSidebarOpen: !this.state.isSidebarOpen});
     }
 
+    goHome() {
+        console.log("TODO")
+    }
+
     render(): React.ReactNode {
         let drawerClass: any = this.props.classes.paper;
         return (
             <div>
-                <Headline isMenuActive={this.state.isSidebarOpen} menuButtonAction={this.handleSidebarOpen}></Headline>
+                <Headline isMenuActive={this.state.isSidebarOpen} menuButtonAction={this.handleSidebarOpen}
+                          goHome={this.goHome}></Headline>
                 <Drawer anchor={"right"} open={this.state.isSidebarOpen} classes={{paper: drawerClass}}>
                     <Menu tabs={tabContents}></Menu>
                 </Drawer>

src/ReturnToHome/ReturnToHome.module.css

@@ -0,0 +1,11 @@
+.returnToHome {
+    background: transparent;
+}
+
+.returnToHomeButton {
+    border: none;
+    width: 25px;
+    margin-left: 20px;
+    background: transparent;
+    outline: none;
+}

src/ReturnToHome/ReturnToHome.tsx

@@ -0,0 +1,17 @@
+import React, {FunctionComponent} from "react";
+import styles from "./ReturnToHome.module.css";
+import ReturnToHome from "../icons/returnToHome.svg";
+
+interface handleGoHome {
+    onClick: () => void;
+}
+
+export const ReturnToHomeButton: FunctionComponent<handleGoHome> = (props) => {
+
+    return (
+        <button className={styles.returnToHomeButton} onClick={props.onClick}>
+            <img alt={"returnToHome"} src={ReturnToHome} className={styles.returnToHome}/>
+        </button>
+    );
+};
+

src/headline/Headline.module.css

@@ -13,4 +13,7 @@
 
 .logo {
     width: 90px;
+    position: absolute;
+    left: 50%;
+    margin-left: -50px;
 }

src/headline/Headline.tsx

@@ -2,10 +2,12 @@ import React, {FunctionComponent} from "react";
 import styles from "./Headline.module.css";
 import logo from '../icons/headerLogo.svg';
 import {MenuButton} from "../Menu/MenuButton";
+import {ReturnToHomeButton} from "../ReturnToHome/ReturnToHome";
 
 export interface HeadlineProps {
     menuButtonAction: () => void;
     isMenuActive: boolean;
+    goHome: () => void;
 }
 
 export const Headline: FunctionComponent<HeadlineProps> = (props) => {
@@ -14,6 +16,8 @@ export const Headline: FunctionComponent<HeadlineProps> = (props) => {
             <MenuButton onClick={props.menuButtonAction} isOpen={props.isMenuActive}></MenuButton>
             <img alt="logo" src={logo} className={styles.logo}/>
             <div className={"location"}></div>
+            <ReturnToHomeButton onClick={props.goHome}/>
         </div>
     );
-}
+
+};