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') {
      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 id="sideBarLinks">
            {Object.keys(tabs).map((key) => {
              const item = tabs[key]
              return (
                <Link href={item.href} key={key}>
                  <a
                    onClick={closeSideBar}
                    className={href.includes(key) ? 'active' : undefined}
                    id={item.id || undefined}
                  >
                    {item.text}
                  </a>
                </Link>
              )
            })}
            <Link href={`/donate`}>
              <a className="donate" onClick={closeSideBar} target="_blank">
                Donate
              </a>
            </Link>
          </div>
        ) : null}
      </div>
      <div className="content">{props.children}</div>
    </div>
  )
}