wrap pages in layout

gatsby-browser.js

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

gatsby-ssr.js

@@ -1,12 +1,13 @@
-import React from "react"
 import "firebase/database"
+import React from "react"
+import Layout from './src/components/Layout/Layout'
 
 const OnDark = () => {
   return (
     <script
       dangerouslySetInnerHTML={{
         __html: `
-        (() => {
+        (function() {
           window.__isDarkTheme = false
           
           window.__setTheme = function(theme) {
@@ -41,3 +42,7 @@ const OnDark = () => {
 export const onRenderBody = ({ setPreBodyComponents }) => {
   setPreBodyComponents(<OnDark key="isDarkTheme" />)
 }
+
+export const wrapPageElement = ({ element, props }) => {
+  return <Layout {...props}>{element}</Layout>;
+};

src/components/Header/Header.js

@@ -21,13 +21,19 @@ 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])
+  }, [isMobileOpen, setIsDark, setReady])
 
   const mobileHandler = () => {
     setIsMobileOpen(!isMobileOpen)
@@ -71,7 +77,7 @@ const Header = () => {
           <div className="header-nav__links">
             <nav>{renderLinks()}</nav>
           </div>
-          <ThemeSwitcher />
+          <ThemeSwitcher ready={ready} isDark={isDark} setIsDark={setIsDark} />
         </div>
         <div
           className={

src/components/Header/ThemeSwitcher/ThemeSwitcher.js

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

src/pages/404.js

@@ -3,11 +3,10 @@ import { Main } from "../ui/ui"
 import { Grid } from "react-flexbox-grid"
 import { Link } from "gatsby"
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 
 const NotFound = () => {
   return (
-    <Layout>
+    <>
       <SEO />
       <Main>
         <Grid fluid>
@@ -18,7 +17,7 @@ const NotFound = () => {
           </div>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 

src/pages/about.js

@@ -3,7 +3,6 @@ import { Grid, Row, Col } from "react-flexbox-grid"
 import { Main } from "../ui/ui"
 import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 import Offers from "../components/Offers/Offers"
 import About from "../components/About/About"
 
@@ -12,7 +11,7 @@ const AboutPage = () => {
     siteMetadata: { title, menuLinks, social },
   } = useSiteMetadataQuery()
   return (
-    <Layout>
+    <>
       <SEO
         title="О сайте"
         description="Этот сайт придуман для того, чтобы помочь вам разобраться с вашей проблемой и решить её. Сайт содержит в себе статьи и руководства."
@@ -35,7 +34,7 @@ const AboutPage = () => {
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 

src/pages/articles.js

@@ -8,7 +8,6 @@ import useCategoriesQuery from "../hooks/useCategoriesQuery"
 import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
 
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 import Articles from "../components/Articles/Articles"
 import Categories from "../components/Articles/Categories/Categories"
 import CategoryItem from "../components/Articles/Categories/CategoryItem"
@@ -64,7 +63,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
   }, [setFiltredArticles, filterArticles, allArticles.edges, query, onPage])
 
   return (
-    <Layout>
+    <>
       <SEO title="Статьи" />
       <Main>
         <Grid fluid>
@@ -123,7 +122,7 @@ const ArticlesPage = ({ data: { allMarkdownRemark: edges } }) => {
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 

src/pages/contacts.js

@@ -3,7 +3,6 @@ import { Main } from "../ui/ui"
 import { Grid, Row, Col } from "react-flexbox-grid"
 import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 import Contacts from "../components/Contacts/Contacts"
 
 const ContactsPage = () => {
@@ -13,7 +12,7 @@ const ContactsPage = () => {
     },
   } = useSiteMetadataQuery()
   return (
-    <Layout>
+    <>
       <SEO
         title="📝 Контакты"
         description="Для того чтобы задать вопрос, сообщить об ошибках или просто поздороваться, вы можете воспользоваться формой обратной связи или использовать контактные данные."
@@ -27,7 +26,7 @@ const ContactsPage = () => {
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 

src/pages/index.js

@@ -5,7 +5,6 @@ import { Grid, Row, Col } from "react-flexbox-grid"
 import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
 import useSnippetsQuery from "../hooks/useSnippetsQuery"
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 import Articles from "../components/Articles/Articles"
 import Snippets from "../components/Snippets/Snippets"
 import SnippetItem from "../components/Snippets/SnippetItem/SnippetItem"
@@ -23,7 +22,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
   let [limit, setLimit] = React.useState(onPage)
 
   return (
-    <Layout>
+    <>
       <SEO />
       <Main>
         <Grid fluid>
@@ -59,7 +58,7 @@ const IndexPage = ({ data: { allMarkdownRemark: edges } }) => {
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 

src/pages/snippets.js

@@ -3,7 +3,6 @@ import { graphql } from "gatsby"
 import { Main } from "../ui/ui"
 import { Grid, Row, Col } from "react-flexbox-grid"
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 import Snippets from "../components/Snippets/Snippets"
 import SnippetItem from "../components/Snippets/SnippetItem/SnippetItem"
 
@@ -13,7 +12,7 @@ const SnippetsPage = ({
   },
 }) => {
   return (
-    <Layout>
+    <>
       <SEO />
       <Main>
         <Grid fluid>
@@ -39,7 +38,7 @@ const SnippetsPage = ({
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 

src/templates/articleTemplate.js

@@ -1,7 +1,6 @@
 import React from "react"
 import { Main } from "../ui/ui"
 import { Grid, Row, Col } from "react-flexbox-grid"
-import Layout from "../components/Layout/Layout"
 import Article from "../components/Article/Article"
 import Offers from "../components/Offers/Offers"
 import MoreArticles from "../components/Articles/MoreArticles/MoreArticles"
@@ -14,7 +13,7 @@ const articleTemplate = ({
   },
 }) => {
   return (
-    <Layout>
+    <>
       <Main>
         <Grid fluid>
           <Row>
@@ -29,7 +28,7 @@ const articleTemplate = ({
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 

src/templates/categoryTemplate.js

@@ -5,7 +5,6 @@ import { graphql } from "gatsby"
 import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
 import useCategoriesQuery from "../hooks/useCategoriesQuery"
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 import Articles from "../components/Articles/Articles"
 import Categories from "../components/Articles/Categories/Categories"
 import CategoryItem from "../components/Articles/Categories/CategoryItem"
@@ -28,7 +27,7 @@ const CategoryPage = ({
   let [limit, setLimit] = React.useState(onPage)
 
   return (
-    <Layout>
+    <>
       <SEO title={title} canonical={`${siteUrl}/articles`} />
       <Main>
         <Grid fluid>
@@ -63,7 +62,7 @@ const CategoryPage = ({
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 

src/templates/snippetTemplate.js

@@ -2,7 +2,6 @@ import React from "react"
 import { Main } from "../ui/ui"
 import { Grid, Row, Col } from "react-flexbox-grid"
 import Snippet from "../components/Snippet/Snippet"
-import Layout from "../components/Layout/Layout"
 import { graphql } from "gatsby"
 
 const snippetTemplate = ({
@@ -11,7 +10,7 @@ const snippetTemplate = ({
   },
 }) => {
   return (
-    <Layout>
+    <>
       <Main>
         <Grid fluid style={{ maxWidth: 900 }}>
           <Row>
@@ -21,7 +20,7 @@ const snippetTemplate = ({
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }
 

src/templates/tagTemplate.js

@@ -5,7 +5,6 @@ import { graphql } from "gatsby"
 import useSiteMetadataQuery from "../hooks/useSiteMetadataQuery"
 import useCategoriesQuery from "../hooks/useCategoriesQuery"
 import SEO from "../components/SEO/SEO"
-import Layout from "../components/Layout/Layout"
 import Articles from "../components/Articles/Articles"
 import Categories from "../components/Articles/Categories/Categories"
 import CategoryItem from "../components/Articles/Categories/CategoryItem"
@@ -28,7 +27,7 @@ const TagPage = ({
   let [limit, setLimit] = React.useState(onPage)
 
   return (
-    <Layout>
+    <>
       <SEO title={title} canonical={`${siteUrl}/articles`} />
       <Main>
         <Grid fluid>
@@ -63,7 +62,7 @@ const TagPage = ({
           </Row>
         </Grid>
       </Main>
-    </Layout>
+    </>
   )
 }