Merge branch 'master' of gitlab.com:MrFry/qmining-page

src/components/layout.js

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react'
+import ReactDOM from 'react-dom'
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
 
@@ -13,12 +14,42 @@ import styles from './layout.module.css'
 import tabs from '../data/tabs.json'
 import topBarLinks from '../data/topBarLinks.json'
 
-const renderSnow = () => {
+const shouldRenderSnow = () => {
   const date = new Date()
   // if its december, and date is more than 5
   return date.getMonth() === 11 && date.getDate() > 5
 }
 
+function Snow() {
+  const [windowSize, setWindowSize] = useState([100, 200])
+
+  useEffect(() => {
+    setWindowSize([window.innerWidth, window.innerHeight])
+    window.addEventListener('resize', () => {
+      setWindowSize([window.innerWidth, window.innerHeight])
+    })
+  }, [])
+
+  const snowflakeCount = (windowSize[0] + windowSize[1]) / 26
+
+  if (typeof window !== 'object') return null
+
+  return ReactDOM.createPortal(
+    <div
+      style={{
+        pointerEvents: 'none',
+        zIndex: 900,
+        position: 'fixed',
+        width: `${windowSize[0]}px`,
+        height: `${windowSize[1]}px`,
+      }}
+    >
+      <Snowfall snowflakeCount={snowflakeCount} />
+    </div>,
+    document.body
+  )
+}
+
 function TopBar({
   setSidebarOpen,
   sidebarOpen,
@@ -192,7 +223,6 @@ function MenuIcon({ setSidebarOpen, sidebarOpen }) {
 
 export default function Layout({ children, router, globalData }) {
   const [sidebarOpen, setSidebarOpen] = useState(true)
-  const [windowSize, setWindowSize] = useState([100, 200])
   const [donateShowing, setDonateShowing] = useState(false)
 
   const userId = globalData.userId
@@ -217,29 +247,13 @@ export default function Layout({ children, router, globalData }) {
 
   useEffect(() => {
     closeSideBar()
-    setWindowSize([window.innerWidth, window.innerHeight])
     window.addEventListener('resize', () => {
-      setWindowSize([window.innerWidth, window.innerHeight])
       setSidebarOpen(window.innerWidth >= 700)
     })
   }, [])
-  const snowflakeCount = (windowSize[0] + windowSize[1]) / 26
 
   return (
     <>
-      {renderSnow() && (
-        <div
-          style={{
-            pointerEvents: 'none',
-            zIndex: 900,
-            position: 'fixed',
-            width: `${windowSize[0]}px`,
-            height: `${windowSize[1]}px`,
-          }}
-        >
-          <Snowfall snowflakeCount={snowflakeCount} />
-        </div>
-      )}
       <div className={styles.topBar}>
         <TopBar
           setSidebarOpen={setSidebarOpen}
@@ -269,6 +283,7 @@ export default function Layout({ children, router, globalData }) {
       ) : null}
       <div className={styles.content}>{children}</div>
       <BB />
+      {shouldRenderSnow() && <Snow />}
     </>
   )
 }