use media queries instead of ResponsiveContext

Author: dwwoelfel

src/App.css

@@ -25,3 +25,32 @@ pre {
   overflow: scroll;
   font-size: 11.9px;
 }
+
+.layout {
+  display: grid;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  grid-template-areas:
+    "header header"
+    "main sidebar";
+  grid-template-columns: auto auto;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  grid-template-rows: auto 1fr;
+}
+
+@media(max-width: 800px) {
+  .layout {
+    grid-template-areas:
+      "header"
+      "main"
+      "sidebar";
+    grid-template-columns: 1fr;
+  }
+  .sidebar {
+    display: none;
+  }
+}

src/App.js

@@ -227,75 +227,54 @@ export default class App extends React.Component<
         }}>
         <NotificationContainer>
           <Grommet theme={theme}>
-            <ResponsiveContext.Consumer>
-              {size => {
-                const small = size === 'small';
-                return (
-                  <Grid
-                    fill
-                    rows={['auto', 'flex']}
-                    columns={small ? ['flex'] : ['flex', 'auto']}
-                    areas={
-                      small
-                        ? [
-                            {name: 'header', start: [0, 0], end: [1, 0]},
-                            {name: 'main', start: [0, 1], end: [1, 1]},
-                          ]
-                        : [
-                            {name: 'header', start: [0, 0], end: [1, 0]},
-                            {name: 'main', start: [0, 1], end: [1, 1]},
-                            {name: 'sidebar', start: [1, 1], end: [1, 1]},
-                          ]
-                    }>
-                    <Box
-                      gridArea="header"
-                      direction="row"
-                      align="center"
-                      justify="between"
-                      pad={{horizontal: 'medium', vertical: 'medium'}}
-                      wrap={true}>
-                      <Box align="center" direction="row">
-                        <OneGraphLogo width="96px" height="96px" />{' '}
-                        <Heading level={2}>
-                          <Link style={{color: 'inherit'}} to="/">
-                            OneGraph Product Updates
-                          </Link>
-                        </Heading>
-                      </Box>
-                      <Anchor href="https://onegraph.com">
-                        <Text size="small">Learn more about OneGraph</Text>
-                      </Anchor>
-                    </Box>
-                    {small ||
-                    !process.env.RAZZLE_ENABLE_MAILCHIMP_SIGNUP ? null : (
-                      <Box gridArea="sidebar" pad="medium" width="medium">
-                        <NewsletterSignup />
-                      </Box>
-                    )}
-                    <Box gridArea="main">
-                      <ScrollMemory />
-                      <Switch>
-                        {routes.map((routeConfig, i) => (
-                          <Route
-                            key={i}
-                            path={routeConfig.path}
-                            exact={routeConfig.exact}
-                            strict={routeConfig.strict}
-                            render={props => (
-                              <RenderRoute
-                                environment={this.props.environment}
-                                match={props.match}
-                                routeConfig={routeConfig}
-                              />
-                            )}
-                          />
-                        ))}
-                      </Switch>
-                    </Box>
-                  </Grid>
-                );
-              }}
-            </ResponsiveContext.Consumer>
+            <div className="layout">
+              <Box
+                gridArea="header"
+                direction="row"
+                align="center"
+                justify="between"
+                pad={{horizontal: 'medium', vertical: 'medium'}}
+                wrap={true}>
+                <Box align="center" direction="row">
+                  <OneGraphLogo width="96px" height="96px" />{' '}
+                  <Heading level={2}>
+                    <Link style={{color: 'inherit'}} to="/">
+                      OneGraph Product Updates
+                    </Link>
+                  </Heading>
+                </Box>
+                <Anchor href="https://onegraph.com">
+                  <Text size="small">Learn more about OneGraph</Text>
+                </Anchor>
+              </Box>
+              {!process.env.RAZZLE_ENABLE_MAILCHIMP_SIGNUP ? null : (
+                <div className="sidebar">
+                  <Box gridArea="sidebar" pad="medium" width="medium">
+                    <NewsletterSignup />
+                  </Box>
+                </div>
+              )}
+              <Box gridArea="main">
+                <ScrollMemory />
+                <Switch>
+                  {routes.map((routeConfig, i) => (
+                    <Route
+                      key={i}
+                      path={routeConfig.path}
+                      exact={routeConfig.exact}
+                      strict={routeConfig.strict}
+                      render={props => (
+                        <RenderRoute
+                          environment={this.props.environment}
+                          match={props.match}
+                          routeConfig={routeConfig}
+                        />
+                      )}
+                    />
+                  ))}
+                </Switch>
+              </Box>
+            </div>
           </Grommet>
         </NotificationContainer>
       </UserContext.Provider>