title: React Gatsby window is not defined server side
body: <p>I'm trying to render either a mobile nav or a regular navbar depending on the width of the window. While deploying to netlify, I get the error that window is not available during server side rendering.  I read the gatsby docs docs on the issue, and I understand that is happening but I cannot figure out the proper way to restructure this since I cannot useState within useEffect and I otherwise deal with scoping of my variables.  Any help would be appreciated!</p>
  <p>This is the gatsby documentation: <a href="https://www.gatsbyjs.com/docs/debugging-html-builds/" rel="nofollow noreferrer">https://www.gatsbyjs.com/docs/debugging-html-builds/</a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const Layout = ({ children}) =&gt; {
    const width = useWindowSize()
    
    let navbar;
  
    if (width &gt; 936) {
      navbar = &lt;NavBar /&gt;
    } else {
      navbar = &lt;MobileNav /&gt;
    }
  
    return (
      &lt;OverflowHidden&gt;
        {navbar}
        &lt;main&gt;{children}&lt;/main&gt;
        &lt;Footer/&gt;
      &lt;/OverflowHidden&gt;
    )
  }
  
  const useWindowSize = () =&gt; {
    const [size, setSize] = useState(window.innerWidth) 
  
    useEffect(() =&gt; {
      const handleResize = () =&gt; {
        setSize(window.innerWidth)
      }
      window.addEventListener('resize', handleResize)
    }, [])
  
    return size
  }
  
  const OverflowHidden = styled.div`
    overflow-x: hidden;
    height: 100%;
  `
  
  export default Layout</code></pre>
  </div>
  </div>
  </p>