Solve the gatsby window error in navbar

tattle-made · Aug 22, 2023 · c5ca2dc · c5ca2dc
1 parent 8021a8d
commit c5ca2dc
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/uli-website/src/components/molecules/Footer.jsx b/uli-website/src/components/molecules/Footer.jsx
@@ -5,14 +5,19 @@ import { navigate } from "gatsby";
 
 export default function Footer() {
 
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [windowWidth, setWindowWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 0
+  );
 
   useEffect(() => {
-    const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
+    if (typeof window !== "undefined") {
+      const handleResize = () => {
+        setWindowWidth(window.innerWidth);
+      };
+
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
   }, []);
 
   const isSmallScreen = windowWidth <= 768;

diff --git a/uli-website/src/components/molecules/NavBar.jsx b/uli-website/src/components/molecules/NavBar.jsx
@@ -31,7 +31,9 @@ const NavBarByLang = {
 export default function NavBar() {
   const [langOption, setLangOption] = useState(undefined);
   const location = useLocation();
-  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const [windowWidth, setWindowWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 0
+  );
 
   useEffect(() => {
     console.log(`pageLoad `);
@@ -50,12 +52,14 @@ export default function NavBar() {
         lang = "en";
     }
     setLangOption(lang);
-  const handleResize = () => {
-      setWindowWidth(window.innerWidth);
-    };
+   if (typeof window !== "undefined") {
+      const handleResize = () => {
+        setWindowWidth(window.innerWidth);
+      };
 
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
+      window.addEventListener("resize", handleResize);
+      return () => window.removeEventListener("resize", handleResize);
+    }
   }, [location.pathname]);
 
   const isSmallScreen = windowWidth <= 768;