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,9 +14,18 @@ export default function Layout (props) {
     href = 'index'
   }
 
+  const closeSideBar = () => {
     if (typeof window !== 'undefined') {
-    console.log(window)
+      console.log('window.innerWidth', window.innerWidth)
+      if (window.innerWidth < constants.mobileWindowWidth) {
+        setSidebarOpen(false)
       }
+    }
+  }
+
+  useEffect(() => {
+    closeSideBar()
+  }, [])
 
   return (
     <div>
@@ -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>

src/pages/home.js

@@ -1,32 +0,0 @@
-import React, { PureComponent } from 'react'
-
-import links from './links.json'
-import constants from '../constants.json'
-
-// TODO: aludni
-class HomeTab extends PureComponent {
-  render () {
-    return (<div>HAAAAAAAAAA</div>)
-    // return (
-    //   <div>
-    //     {Object.keys(links).map((key) => {
-    //       const link = links[key]
-    //       return (
-    //         <div
-    //           className='link'
-    //           key={key}
-    //         >
-    //           <a
-    //             href={constants.serverUrl + link.href}
-    //           >
-    //             {link.text}
-    //           </a>
-    //         </div>
-    //       )
-    //     })}
-    //   </div>
-    // )
-  }
-}
-
-export default HomeTab