Add app bar with title

website/src/components/Devices.tsx

@@ -20,9 +20,6 @@ class Devices extends React.Component {
   render() {
     return (
       <Grid container spacing={3} style={{ padding: '1rem' }}>
-        <Grid item xs={12} sm={6}>
-          <h1>Your Devices</h1>
-        </Grid>
         <Grid item xs={12} sm={6}>
           <AddDevice />
         </Grid>

website/src/components/Navigation.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles(theme => ({
+  title: {
+    flexGrow: 1,
+  },
+}));
+
+export default function Navigation() {
+  const classes = useStyles();
+
+  return (
+    <AppBar position="static">
+      <Toolbar>
+        <Typography variant="h6" className={classes.title}>
+        Your Devices
+        </Typography>
+      </Toolbar>
+    </AppBar>
+  );
+}

website/src/index.tsx

@@ -3,13 +3,15 @@ import ReactDOM from 'react-dom';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import Box from '@material-ui/core/Box';
 import Devices from './components/Devices';
+import Navigation from './components/Navigation';
 import { view } from 'react-easy-state';
 import 'typeface-roboto';
 
 const App = view(() => {
   return (
     <React.Fragment>
       <CssBaseline />
+      <Navigation />
       <Box component="div" m={3}>
         <Devices />
       </Box>