@t2ca/gatsby-theme-showcase 1.0.118 → 1.0.120

package/package.json

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

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

@@ -87,18 +87,18 @@ 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)
-  }, [])
+  // useEffect(() => {
+  //   setHasMounted(true)
+  // }, [])
 
-  if (!hasMounted) {
-    return null
-  }
+  // if (!hasMounted) {
+  //   return null
+  // }
 
   const toggleColorMode = (e) => {
     e.preventDefault()

package/src/components/header.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import { useEffect } from "react"
 import { Link } from "gatsby"
 import { jsx, Container, Box, Alert } from "theme-ui"
 import NavLink from "./nav-link"
@@ -28,9 +29,12 @@ export default ({
   svgLogo,
   button,
   alertMsg,
-  callBack,
+  setIsAlert,
 }) => {
-  callBack(alertMsg ? true : false)
+  useEffect(() => {
+    setIsAlert(alertMsg ? true : false)
+  }, [])
+
   return (
     <div sx={{ position: `fixed`, zIndex: `100`, width: `100%` }}>
       {alertMsg && <Alert variant="banner">{alertMsg}</Alert>}

package/src/components/layout.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { useState } from "react"
+import { useState, useEffect } from "react"
 import { jsx, Themed } from "theme-ui"
 import { Global } from "@emotion/react"
 import { Helmet } from "react-helmet"
@@ -10,11 +10,16 @@ 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 getAlertBoolean = (item) => {
-    setIsAlert(item)
+  useEffect(() => {
+    setHasMounted(true)
+  }, [])
+
+  if (!hasMounted) {
+    return null
   }
 
   return (
@@ -37,10 +42,10 @@ const Layout = ({ header, children }) => {
         styles={header}
         menuOpen={menuOpen}
         setMenuOpen={setMenuOpen}
-        callBack={getAlertBoolean}
+        setIsAlert={setIsAlert}
       />
 
-      <Sidebar open={menuOpen} />
+      <Sidebar open={menuOpen} isAlert={isAlert} />
 
       <div
         sx={{

package/src/components/sidebar.js

@@ -3,14 +3,14 @@ import { jsx } from "theme-ui"
 import { Sidenav } from "@theme-ui/sidenav"
 import NavLink from "./nav-link"
 
-export default ({ menuLinks, open }) => {
+export default ({ menuLinks, open, isAlert }) => {
   return (
     <Sidenav
       sx={{
         px: 3,
         pt: 3,
         pb: 4,
-        mt: [110, 110, 0],
+        mt: isAlert ? [`110px`, `110px`, 0] : [`68px`, `68px`, 0],
         position: ["fixed", "fixed", "sticky"],
         bottom: [0, 0, "auto"],
         maxHeight: ["100vh", "100vh", "none"],