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,19 +29,23 @@ export default function Layout (props) {
             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'}>
+        {sidebarOpen
+          ? <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>
+            </a>
+          </div>
+          : null}
       </div>
       <div className='content'>
         {props.children}

src/defaultStyles.css

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