fix: 🐛 fix issue when accessing document object in SSR

src/html.js

@@ -28,21 +28,6 @@ export default class HTML extends React.Component {
           {this.props.preBodyComponents}
           <div key={`body`} id="___gatsby" dangerouslySetInnerHTML={{ __html: this.props.body }} />
           {this.props.postBodyComponents}
-          <script
-            defer
-            dangerouslySetInnerHTML={{
-              __html: `
-            function navBarClose() {
-              document.getElementById("navbar").classList.toggle("responsive");
-            }
-            document.addEventListener('click',function(e){
-              if(e.target && e.target.tagName.toLowerCase() === 'a'){
-                navBarClose();
-              }
-           });
-            `,
-            }}
-          />
         </body>
       </html>
     );

src/styles/responsive.js

@@ -1,36 +1,36 @@
 const breakpointsInt = {
-    small: 768,
-    large: 1170,
+  small: 768,
+  large: 1170,
 };
 
-const breakpoints = {
-};
+const breakpoints = {};
 
-Object.keys(breakpointsInt).map(function(key, index) {
-    breakpoints[key] = breakpointsInt[key] + 'px';
-  });
+Object.keys(breakpointsInt).map(function (key, index) {
+  breakpoints[key] = breakpointsInt[key] + 'px';
+});
 
-const mq = Object.values(breakpoints).map(
-    bp => `@media (max-width: ${bp})`
-  )
+const mq = Object.values(breakpoints).map((bp) => `@media (max-width: ${bp})`);
 
 const checkViewport = (maxValue) => {
-    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+  if (typeof document !== `undefined`) {
+    const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
     return vw <= maxValue;
-}
+  }
+  return false;
+}; 
 
 export const isMobile = () => {
-    return checkViewport(breakpointsInt.small);
-}
+  return checkViewport(breakpointsInt.small);
+};
 
 export const isTablet = () => {
-    return checkViewport(breakpointsInt.large);
-}
+  return checkViewport(breakpointsInt.large);
+};
 
 export const isNormal = () => {
-    return !(isMobile() || isTablet());
-} 
+  return !(isMobile() || isTablet());
+};
 
 export const onMobile = mq[0];
 
-export const onTablet = mq[1];
+export const onTablet = mq[1];