Skip to content
Permalink
Browse files

Refactor sun moon toggle to separate component

  • Loading branch information...
wgao19 committed May 23, 2019
1 parent df8f57d commit fdc8d104bf07d6cc3e1195a0d4bb0bc0b590d1e3
@@ -3,38 +3,21 @@ import React, { useState, useEffect } from 'react'
import cx from 'classnames'
import Header from '../Header'
import Footer from '../Footer'
import SunMoonToggle from '../SunMoonToggle'
import s from './s.module.scss'
import './prism-reset.css'

const THEMES = ['sun', 'moon']
const getNewTheme = currentTheme => THEMES[1 - THEMES.indexOf(currentTheme)]

const Layout = props => {
const [theme, setTheme] = useState(
typeof window !== 'undefined'
? window.localStorage.getItem('theme')
: THEMES[0]
)
const toggleTheme = currentTheme => {
const newTheme = getNewTheme(currentTheme)
setTheme(newTheme)
}
useEffect(() => {
typeof window !== 'undefined' && window.localStorage.setItem('theme', theme)
}, [theme])
const { children, location } = props
return (
<>
<base target="_blank" />
<main>
<SunMoonToggle />
<div className={s.bg} />
<div
className={cx(s.toggle, theme === THEMES[1] ? null : s.hasZIndex)}
onClick={toggleTheme.bind(null, theme)}
/>
<div
className={cx(s.blender, theme === THEMES[1] ? s.expanded : null)}
/>
<Header location={location} />
<div>{children}</div>
<Footer />
@@ -1,5 +1,3 @@

@import '../styles/variables.scss';
:root {
font-size: 1.125 * 100%;
}
@@ -17,45 +15,7 @@
}
}
:local {
.blender {
width: 3rem;
height: 3rem;
background: #efefef;
position: fixed;
border-radius: 50%;
right: calc(50% - 40rem / 2 - 4rem);
bottom: 1rem;
mix-blend-mode: exclusion;
pointer-events: none;
transition: all ease .5s;
@media screen and (max-width: $break-tiny) {
right: 1rem;
}
}
.expanded {
transform: scale(90);
}
.toggle {
background: #100f2c;
width: 3rem;
height: 3rem;
position: fixed;
border-radius: 50%;
right: calc(50% - 40rem / 2 - 4rem);
bottom: 1rem;
cursor: pointer;
transition: all ease .5s;
@media screen and (max-width: $break-tiny) {
right: 1rem;
opacity: .8;
}
}
.hasZIndex {
z-index: 1;
@media screen and (max-width: $break-tiny) {
opacity: .2;
}
}

.bg {
position: fixed;
background: #efefef;
@@ -0,0 +1,35 @@
import React, { useState, useEffect } from 'react'
import cx from 'classnames'
import s from './s.module.scss'

const THEMES = ['sun', 'moon']
const getNewTheme = currentTheme =>
THEMES.indexOf(currentTheme) >= 0
? THEMES[1 - THEMES.indexOf(currentTheme)]
: THEMES[0]

const SunMoonToggle = () => {
const [theme, setTheme] = useState(
typeof window !== 'undefined'
? window.localStorage.getItem('theme')
: THEMES[0]
)
const toggleTheme = currentTheme => {
const newTheme = getNewTheme(currentTheme)
setTheme(newTheme)
}
useEffect(() => {
typeof window !== 'undefined' && window.localStorage.setItem('theme', theme)
}, [theme])
return (
<React.Fragment>
<div
className={cx(s.toggle, theme === THEMES[1] ? null : s.hasZIndex)}
onClick={toggleTheme.bind(null, theme)}
/>
<div className={cx(s.blender, theme === THEMES[1] ? s.expanded : null)} />
</React.Fragment>
)
}

export default SunMoonToggle
@@ -0,0 +1,43 @@
@import '../styles/variables.scss';

:local{
.blender {
width: 3rem;
height: 3rem;
background: #efefef;
position: fixed;
border-radius: 50%;
right: calc(50% - 40rem / 2 - 4rem);
bottom: 1rem;
mix-blend-mode: exclusion;
pointer-events: none;
transition: all ease .5s;
@media screen and (max-width: $break-tiny) {
right: 1rem;
}
}
.expanded {
transform: scale(90);
}
.toggle {
background: #100f2c;
width: 3rem;
height: 3rem;
position: fixed;
border-radius: 50%;
right: calc(50% - 40rem / 2 - 4rem);
bottom: 1rem;
cursor: pointer;
transition: all ease .5s;
@media screen and (max-width: $break-tiny) {
right: 1rem;
opacity: .8;
}
}
.hasZIndex {
z-index: 1;
@media screen and (max-width: $break-tiny) {
opacity: .2;
}

} }

0 comments on commit fdc8d10

Please sign in to comment.
You canā€™t perform that action at this time.