@t2ca/gatsby-theme-showcase 1.0.120 → 1.0.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@t2ca/gatsby-theme-showcase",
-  "version": "1.0.120",
+  "version": "1.0.121",
   "main": "index.js",
   "license": "MIT",
   "devDependencies": {

package/src/components/color-mode-toggle.js

@@ -87,24 +87,24 @@ const MoonMask = styled.div`
 `
 
 const ColorModeToggle = () => {
-  // const [hasMounted, setHasMounted] = useState(false)
+  const [hasMounted, setHasMounted] = useState(false)
   const context = useThemeUI()
   const { theme, colorMode, setColorMode } = context
   const isDark = colorMode === `dark`
 
-  // useEffect(() => {
-  //   setHasMounted(true)
-  // }, [])
-
-  // if (!hasMounted) {
-  //   return null
-  // }
-
   const toggleColorMode = (e) => {
     e.preventDefault()
     setColorMode(isDark ? `default` : `dark`)
   }
 
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  if (!hasMounted) {
+    return null
+  }
+
   return (
     <IconWrapper
       onClick={toggleColorMode}

package/src/components/footer.js

@@ -5,7 +5,12 @@ import { FaTwitter, FaGithub, FaLinkedin, FaInstagram } from "react-icons/fa"
 
 export default ({ name }) => {
   return (
-    <Box bg="Menu">
+    <Box
+      bg="Menu"
+      sx={{
+        pb: [`3.75rem`, `initial`],
+      }}
+    >
       <Container>
         <footer
           sx={{

package/src/components/header.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { useEffect } from "react"
+import { useState, useEffect } from "react"
 import { Link } from "gatsby"
 import { jsx, Container, Box, Alert } from "theme-ui"
 import NavLink from "./nav-link"
@@ -29,10 +29,10 @@ export default ({
   svgLogo,
   button,
   alertMsg,
-  setIsAlert,
+  callBack,
 }) => {
   useEffect(() => {
-    setIsAlert(alertMsg ? true : false)
+    callBack(alertMsg ? true : false)
   }, [])
 
   return (

package/src/components/layout.js

@@ -10,18 +10,14 @@ import Footer from "./footer"
 import Sidebar from "./sidebar"
 
 const Layout = ({ header, children }) => {
-  const [hasMounted, setHasMounted] = useState(false)
   const [menuOpen, setMenuOpen] = useState(false)
-  const [isAlert, setIsAlert] = useState(null)
+  const [isAlert, setIsAlert] = useState(false)
+  const [hasMounted, setHasMounted] = useState(false)
 
   useEffect(() => {
     setHasMounted(true)
   }, [])
 
-  if (!hasMounted) {
-    return null
-  }
-
   return (
     <Themed.root>
       <Global
@@ -42,20 +38,22 @@ const Layout = ({ header, children }) => {
         styles={header}
         menuOpen={menuOpen}
         setMenuOpen={setMenuOpen}
-        setIsAlert={setIsAlert}
+        callBack={setIsAlert}
       />
 
       <Sidebar open={menuOpen} isAlert={isAlert} />
 
-      <div
-        sx={{
-          pt: isAlert ? `6.875rem` : `4.25rem`,
-          pb: [`3.75rem`, `initial`],
-        }}
-      >
-        {children}
-        <Footer />
-      </div>
+      {!hasMounted ? null : (
+        <div
+          sx={{
+            pt: isAlert ? `6.875rem` : `4.25rem`,
+          }}
+        >
+          {children}
+        </div>
+      )}
+
+      <Footer />
 
       <MobileNavigation />
     </Themed.root>