Bringing back styleguide page but moving it

Adjusting megamenu columns

src/components/mega-menu/MegaMenu.js

@@ -83,7 +83,7 @@ const MegaMenu = ({ sticky }) => {
           <Box
             {...{ border: !isVert && { side: 'right' } }}
             {...(isVert && { flex: { shrink: 0 } })}
-            basis={isVert ? 'auto' : '45%'}
+            basis={isVert ? 'auto' : '55%'}
           >
             <GroupHeader
               label="Networking & Connectivity"
@@ -115,7 +115,7 @@ const MegaMenu = ({ sticky }) => {
           {isVert && <Divider flex={{ grow: 0 }} />}
           <Box
             direction="row"
-            basis={isVert ? 'auto' : '55%'}
+            basis={isVert ? 'auto' : '45%'}
             gap="large"
             {...(isVert && { flex: { shrink: 0 } })}
           >

src/components/style-guide/style-guide.js

+import React from 'react';
+import { Heading } from 'grommet';
+import { AppLayout, SEO } from '../components/app';
+import { Container, Column } from '../components/layout';
+import {
+  Colors,
+  GridColumns,
+  Typography,
+  Icons,
+} from '../components/style-guide';
+
+/**
+ * Page for displaying basic styling settings for the website. Move this file to the `src/pages`
+ * directory to view. It has been moved so it does not get published.
+ */
+const StyleGuide = () => (
+  <AppLayout>
+    <SEO title="Style Guide" />
+    <Container>
+      <Column>
+        <Heading>Style Guide</Heading>
+        <Colors />
+        <GridColumns />
+        <Typography />
+        <Icons />
+      </Column>
+    </Container>
+  </AppLayout>
+);
+
+export default StyleGuide;