[APP]: Add toolbar and new avatar to header

Author: cnasikas

app/src/assets/scss/layouts/header.scss

@@ -0,0 +1,8 @@
+.header {
+  height: 75px;
+  border-bottom: 1px solid #000;
+
+  .row {
+    height: 100%;
+  }
+}

app/src/assets/scss/main.scss

@@ -4,4 +4,5 @@
 @import 'components/spinner';
 @import 'components/avatar';
 @import 'layouts/home';
+@import 'layouts/header';
 @import 'layouts/toolbar';

app/src/components/Header/Header.js

@@ -1,41 +1,21 @@
 import React from 'react'
 import cx from 'classnames'
-import AppBar from '@material-ui/core/AppBar'
-import Toolbar from '@material-ui/core/Toolbar'
-import Typography from '@material-ui/core/Typography'
-import IconButton from '@material-ui/core/IconButton'
-import MenuIcon from '@material-ui/icons/Menu'
-import { withStyles } from '@material-ui/core/styles'
 import { Link } from 'react-router-dom'
 
-const styles = {
-  appBar: {
-    zIndex: 10000
-  },
-  headerTitle: {
-    flex: 1
-  },
-  menuButton: {
-    marginLeft: -12,
-    marginRight: 20
-  }
-}
-
 function Header ({ ...props }) {
-  const { classes, Avatar } = props
+  const { Avatar, ToolBar } = props
   return (
-    <AppBar position='absolute' className={classes.appBar}>
-      <Toolbar>
-        <IconButton className={classes.menuButton} color='inherit' aria-label='Menu'>
-          <MenuIcon />
-        </IconButton>
-        <Typography variant='title' color='inherit' className={cx(classes.headerTitle, 'header-link')}>
-          <Link to='/'>Blockchain Course</Link>
-        </Typography>
-        <Avatar />
-      </Toolbar>
-    </AppBar>
+    <header className='header container-fluid'>
+      <div className='row'>
+        <div className='col-6'>
+          <ToolBar />
+        </div>
+        <div className='col-6'>
+          <Avatar />
+        </div>
+      </div>
+    </header>
   )
 }
 
-export default withStyles(styles)(Header)
+export default Header