Hiding sidebar on click on mobile

src/components/layout.js

@@ -1,9 +1,11 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import Link from 'next/link'
 
 import tabs from '../data/tabs.json'
 import constants from '../constants.json'
 
+// FIXME: window resize event listener to show sidebar on resize
+
 export default function Layout (props) {
   let href = props.route
   const [sidebarOpen, setSidebarOpen] = useState(true)
@@ -12,10 +14,19 @@ export default function Layout (props) {
     href = 'index'
   }
 
-  if (typeof window !== 'undefined') {
-    console.log(window)
+  const closeSideBar = () => {
+    if (typeof window !== 'undefined') {
+      console.log('window.innerWidth', window.innerWidth)
+      if (window.innerWidth < constants.mobileWindowWidth) {
+        setSidebarOpen(false)
+      }
+    }
   }
 
+  useEffect(() => {
+    closeSideBar()
+  }, [])
+
   return (
     <div>
       <div className='sidebar'>
@@ -36,6 +47,7 @@ export default function Layout (props) {
               return (
                 <Link href={item.href} key={key} >
                   <a
+                    onClick={closeSideBar}
                     className={href.includes(key) ? 'active' : ''}
                   >{item.text}</a>
                 </Link>