qmining-page/src/components/layout.js

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)

  if (href === '/' || href === '') {
    href = 'index'
  }

  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'>
        <div className='headercontainer'>
          <span onClick={() => { setSidebarOpen(!sidebarOpen) }} className='menuicon'>
            <div />
            <div />
            <div />
          </span>
          <div className='sidebarheader' >
            Frylabs
          </div>
        </div>
        {sidebarOpen
          ? <div>
            {Object.keys(tabs).map((key) => {
              const item = tabs[key]
              return (
                <Link href={item.href} key={key} >
                  <a
                    onClick={closeSideBar}
                    className={href.includes(key) ? 'active' : ''}
                  >{item.text}</a>
                </Link>
              )
            })}
            <a href={constants.serverUrl + 'donate'}>
          Donate
            </a>
          </div>
          : null}
      </div>
      <div className='content'>
        {props.children}
      </div>
    </div>
  )
}