Debug Gatsby (codesandbox#394)

* Change something to layout

* Another change

* Make layout a class

Author: CompuIves

packages/homepage/src/layouts/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { ThemeProvider } from 'styled-components';
+import { ThemeProvider } from 'styled-components';
 
 import theme from 'common/theme';
 import '../css/typography.css';
@@ -8,23 +8,22 @@ import '../css/global.css';
 import Navigation from '../components/Navigation';
 import Footer from '../components/Footer';
 
-const Absolute = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  z-index: 20;
-`;
-
-const TemplateWrapper = ({ children }) => (
-  <ThemeProvider theme={theme}>
-    <div>
-      <Absolute>
-        <Navigation />
-      </Absolute>
-      <div style={{ maxWidth: '100vw', overflowX: 'hidden' }}>{children()}</div>
-      <Footer />
-    </div>
-  </ThemeProvider>
-);
-
-export default TemplateWrapper;
+// eslint-disable-next-line
+export default class TemplateWrapper extends React.Component {
+  render() {
+    const { children } = this.props;
+    return (
+      <ThemeProvider theme={theme}>
+        <div>
+          <div style={{ position: 'absolute', left: 0, right: 0, zIndex: 20 }}>
+            <Navigation />
+          </div>
+          <div style={{ maxWidth: '100vw', overflowX: 'hidden' }}>
+            {children()}
+          </div>
+          <Footer />
+        </div>
+      </ThemeProvider>
+    );
+  }
+}