From 4ad0d69ee6010d98d8d7c1a22d9dc427e6758ae8 Mon Sep 17 00:00:00 2001
From: Vincent Bitter <v.bitter@maxiblue.nl>
Date: Mon, 9 Dec 2019 17:28:16 +0100
Subject: [PATCH] Add app bar with title

---
 website/src/components/Devices.tsx    |  3 ---
 website/src/components/Navigation.tsx | 25 +++++++++++++++++++++++++
 website/src/index.tsx                 |  2 ++
 3 files changed, 27 insertions(+), 3 deletions(-)
 create mode 100644 website/src/components/Navigation.tsx

diff --git a/website/src/components/Devices.tsx b/website/src/components/Devices.tsx
index b67e7b85..ea9c26ce 100644
--- a/website/src/components/Devices.tsx
+++ b/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>
diff --git a/website/src/components/Navigation.tsx b/website/src/components/Navigation.tsx
new file mode 100644
index 00000000..b27b1237
--- /dev/null
+++ b/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>
+  );
+}
\ No newline at end of file
diff --git a/website/src/index.tsx b/website/src/index.tsx
index 4d4c52d7..6a5e5784 100644
--- a/website/src/index.tsx
+++ b/website/src/index.tsx
@@ -3,6 +3,7 @@ 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';
 
@@ -10,6 +11,7 @@ const App = view(() => {
   return (
     <React.Fragment>
       <CssBaseline />
+      <Navigation />
       <Box component="div" m={3}>
         <Devices />
       </Box>