Sidebar open close handle

src/components/layout.js

@@ -1,3 +1,4 @@
+import React, { useState } from 'react'
 import Link from 'next/link'
 
 import tabs from '../data/tabs.json'
@@ -5,16 +6,21 @@ import constants from '../constants.json'
 
 export default function Layout (props) {
   let href = props.route
+  const [sidebarOpen, setSidebarOpen] = useState(true)
 
   if (href === '/' || href === '') {
     href = 'index'
   }
 
+  if (typeof window !== 'undefined') {
+    console.log(window)
+  }
+
   return (
     <div>
       <div className='sidebar'>
         <div className='headercontainer'>
-          <span onClick={() => { console.log('CLOSE MENU') }} className='menuicon'>
+          <span onClick={() => { setSidebarOpen(!sidebarOpen) }} className='menuicon'>
             <div />
             <div />
             <div />
@@ -23,6 +29,8 @@ export default function Layout (props) {
             Frylabs
           </div>
         </div>
+        {sidebarOpen
+          ? <div>
             {Object.keys(tabs).map((key) => {
               const item = tabs[key]
               return (
@@ -37,6 +45,8 @@ export default function Layout (props) {
           Donate
             </a>
           </div>
+          : null}
+      </div>
       <div className='content'>
         {props.children}
       </div>

src/defaultStyles.css

@@ -164,11 +164,8 @@ body {
 }
 
 .loadingindicator {
-  position: fixed;
+  text-align: center;
-  top: 50%;
+  vertical-align: middle;
-  left: 50%;
-  -webkit-transform: translate(-50%, -50%);
-  transform: translate(-50%, -50%);
 
   color: #fff;
   font-size: 30px;