diff --git a/gatsby-browser.js b/gatsby-browser.js index 269d1bc..1adc2fa 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -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 {element}; -}; \ No newline at end of file + return {element} +} diff --git a/gatsby-ssr.js b/gatsby-ssr.js index c2d8ea2..80c9516 100644 --- a/gatsby-ssr.js +++ b/gatsby-ssr.js @@ -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 {element}; -}; \ No newline at end of file + return {element} +} diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js index a34bcd3..dde3764 100644 --- a/src/components/Header/Header.js +++ b/src/components/Header/Header.js @@ -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 = () => {
- +
{ - // 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 ( -
+
{isDark ? ( { @@ -33,4 +33,4 @@ const ThemeSwitcher = ({ ready, isDark, setIsDark }) => { ) } -export default ThemeSwitcher \ No newline at end of file +export default ThemeSwitcher