import React, { useState } from "react"
import { Link } from "gatsby"
import '../../styles/header.scss'
import "../../styles/background.scss"

const cycleVisualization = (current) =>{
    if(current === 'square'){
        window.localStorage.setItem('visualization', 'Krzywinski');
        return 'Krzywinski'
    }
    else if(current === 'Krzywinski'){
        window.localStorage.setItem('visualization', 'square');
        return 'square'
    }
    return 'square'
}

const Header = (props) => {
    const loadedVisualization = window? window.localStorage.getItem('visualization') || 'square' : 'square'
    const [expand,setExpand] = useState(false)
    const [visualization, setVisualization] =  useState(loadedVisualization)
    const mainDigits = ['3.',1,4,1,5,9]
    
    return (
        <>
            <section id="background" className={visualization}></section>
            <header>
                <section className={visualization}>
                {mainDigits.map((d,i)=>(<div key={'MainDigit'+i} onClick={()=>setVisualization(cycleVisualization(visualization))}><p className={`digit${parseInt(d)}`}>{d}</p></div>))}
                </section>
                <div id="burger" onClick={()=>setExpand(!expand)}>=</div>
                <nav>
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/projects">Projects</Link></li>
                        <li><Link to="/tech">Technologies</Link></li>
                    </ul>
                </nav>
            </header>
            <aside className={expand?"expanded":undefined}>
                <div id="burger-menu" onClick={()=>setExpand(!expand)}>=</div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/projects">Projects</Link></li>
                    <li><Link to="/tech">Technologies</Link></li>
                </ul>
            </aside>
        </>
    )
}

export default Header
@@ -137,24 +137,76 @@
 nd.scss%22%0D%0A%0D%0A
+const isBrowser = typeof window !== 'undefined';%0D%0A%0D%0A
 const cycleV
@@ -595,16 +595,18 @@
 ation = 
+!!
 window? 

test build pass