bubble/devthread.ru
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/devthread.ru.git synced 2026-10-11 10:19:13 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
Sergey Yarkov 2020-07-22 03:01:59 +03:00
parent aaed77eed1
commit 2a969a2642
4 changed files with 21 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
gatsby-browser.js
View File

@ -1,6 +1,6 @@
import "firebase/database"
import React from 'react';
import Layout from './src/components/Layout/Layout'
import React from "react"
import Layout from "./src/components/Layout/Layout"
import "gatsby-remark-vscode/styles.css"
@ -29,5 +29,5 @@ export const shouldUpdateScroll = ({ routerProps: { location } }) => {
}
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>;
};
return <Layout {...props}>{element}</Layout>
}

6
gatsby-ssr.js
View File

@ -1,6 +1,6 @@
import "firebase/database"
import React from "react"
import Layout from './src/components/Layout/Layout'
import Layout from "./src/components/Layout/Layout"
const OnDark = () => {
return (
@ -44,5 +44,5 @@ export const onRenderBody = ({ setPreBodyComponents }) => {
}
export const wrapPageElement = ({ element, props }) => {
return <Layout {...props}>{element}</Layout>;
};
return <Layout {...props}>{element}</Layout>
}

12
src/components/Header/Header.js
View File

@ -3,7 +3,7 @@ import { useLocation } from "@reach/router"
import PropTypes from "prop-types"
import { Link } from "gatsby"
import useSiteMetadataQuery from "../../hooks/useSiteMetadataQuery"
import ThemeSwitcher from './ThemeSwitcher/ThemeSwitcher'
import ThemeSwitcher from "./ThemeSwitcher/ThemeSwitcher"
import LogoIcon from "../../images/logo-icon.svg"
import TelegramIcon from "../../images/telegram-icon.svg"
@ -21,19 +21,13 @@ const Header = () => {
const [isMobileOpen, setIsMobileOpen] = React.useState(false)
const { pathname } = useLocation()
const [ready, setReady] = React.useState(false)
const [isDark, setIsDark] = React.useState(false)
React.useEffect(() => {
setIsDark(window.__isDarkTheme)
setReady(true)
isMobileOpen
? (document.body.style.overflowY = "hidden")
: (document.body.style.overflowY = "")
document.body.onscroll = () =>
window.pageYOffset >= 100 ? setIsScrolled(true) : setIsScrolled(false)
}, [isMobileOpen, setIsDark, setReady])
}, [isMobileOpen])
const mobileHandler = () => {
setIsMobileOpen(!isMobileOpen)
@ -77,7 +71,7 @@ const Header = () => {
<div className="header-nav__links">
<nav>{renderLinks()}</nav>
</div>
<ThemeSwitcher ready={ready} isDark={isDark} setIsDark={setIsDark} />
<ThemeSwitcher />
</div>
<div
className={

22
src/components/Header/ThemeSwitcher/ThemeSwitcher.js
View File

@ -1,19 +1,19 @@
import React from 'react';
import React from "react"
import MoonIcon from "../../../images/moon-icon.svg"
import SunIcon from "../../../images/sun-icon.svg"
const ThemeSwitcher = ({ ready, isDark, setIsDark }) => {
// const [ready, setReady] = React.useState(false)
// const [isDark, setIsDark] = React.useState(false)
// React.useEffect(() => {
// setIsDark(window.__isDarkTheme)
// setReady(true)
// }, [setIsDark, setReady])
const ThemeSwitcher = () => {
const [ready, setReady] = React.useState(false)
const [isDark, setIsDark] = React.useState(false)
React.useEffect(() => {
setIsDark(window.__isDarkTheme)
setReady(true)
}, [setIsDark, setReady])
return (
<div className={ready ? 'header-nav__theme ready' : 'header-nav__theme'}>
<div className={ready ? "header-nav__theme ready" : "header-nav__theme"}>
{isDark ? (
<SunIcon
onClick={() => {
@ -33,4 +33,4 @@ const ThemeSwitcher = ({ ready, isDark, setIsDark }) => {
)
}
export default ThemeSwitcher
export default ThemeSwitcher