qmining-page/src/components/layout.js

import Link from 'next/link'

import tabs from '../data/tabs.json'
import constants from '../constants.json'

export default function Layout (props) {
  let href = props.route

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

  return (
    <div>
      <div className='sidebar'>
        <div className='headercontainer'>
          <span onClick={() => { console.log('CLOSE MENU') }} className='menuicon'>
            <div />
            <div />
            <div />
          </span>
          <div className='sidebarheader' >
            Frylabs
          </div>
        </div>
        {Object.keys(tabs).map((key) => {
          const item = tabs[key]
          return (
            <Link href={item.href} key={key} >
              <a
                className={href.includes(key) ? 'active' : ''}
              >{item.text}</a>
            </Link>
          )
        })}
        <a href={constants.serverUrl + 'donate'}>
          Donate
        </a>
      </div>
      <div className='content'>
        {props.children}
      </div>
    </div>
  )
}