linear progress at navbar

src/components/Navbar.js

@@ -1,4 +1,6 @@
 import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import senseboxLogo from './sensebox_logo.svg';
@@ -16,6 +18,7 @@ import IconButton from '@material-ui/core/IconButton';
 import ListItem from '@material-ui/core/ListItem';
 import ListItemIcon from '@material-ui/core/ListItemIcon';
 import ListItemText from '@material-ui/core/ListItemText';
+import LinearProgress from '@material-ui/core/LinearProgress';
 
 import { faBars, faChevronLeft, faBuilding, faIdCard, faEnvelope, faCog, faChalkboardTeacher, faFolderPlus, faTools, faLightbulb } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -50,7 +53,7 @@ class Navbar extends Component {
       <div>
         <AppBar
           position="relative"
-          style={{ height: '50px', marginBottom: '30px' }}
+          style={{ height: '50px', marginBottom: this.props.isLoading ? '0px' : '30px', boxShadow: this.props.isLoading ? 'none' : '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)' }}
           classes={{ root: this.props.classes.appBarColor }}
         >
           <Toolbar style={{ height: '50px', minHeight: '50px', padding: 0, color: 'white' }}>
@@ -115,9 +118,20 @@ class Navbar extends Component {
             ))}
           </List> */}
         </Drawer>
+        {this.props.isLoading ?
+          <LinearProgress style={{marginBottom: '30px', boxShadow: '0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)'}}/>
+        : null}
       </div>
     );
   }
 }
 
-export default withStyles(styles, { withTheme: true })(withRouter(Navbar));
+Navbar.propTypes = {
+  isLoading: PropTypes.bool.isRequired
+};
+
+const mapStateToProps = state => ({
+  isLoading: state.tutorial.progress,
+});
+
+export default connect(mapStateToProps, null)(withStyles(styles, { withTheme: true })(withRouter(Navbar)));

src/components/Tutorial/Tutorial.js

@@ -17,7 +17,6 @@ import { detectWhitespacesAndReturnReadableResult } from '../../helpers/whitespa
 
 import Card from '@material-ui/core/Card';
 import Button from '@material-ui/core/Button';
-import LinearProgress from '@material-ui/core/LinearProgress';
 
 class Tutorial extends Component {
 
@@ -49,7 +48,7 @@ class Tutorial extends Component {
     console.log(this.props.tutorial);
     return (
       <div>
-        {this.props.isLoading ? <LinearProgress /> :
+        {this.props.isLoading ? null :
           !this.props.tutorial ? <NotFound button={{ title: 'Zurück zur Tutorials-Übersicht', link: '/tutorial' }} />
             : (() => {
                 var tutorial = this.props.tutorial;

src/components/Tutorial/TutorialHome.js

@@ -15,7 +15,6 @@ import { withStyles } from '@material-ui/core/styles';
 import Grid from '@material-ui/core/Grid';
 import Paper from '@material-ui/core/Paper';
 import Typography from '@material-ui/core/Typography';
-import LinearProgress from '@material-ui/core/LinearProgress';
 
 import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -72,7 +71,7 @@ class TutorialHome extends Component {
 
   render() {
     return (
-      this.props.isLoading ? <LinearProgress /> :
+      this.props.isLoading ? null :
       <div>
         <Breadcrumbs content={[{ link: '/tutorial', title: 'Tutorial' }]} />