added snow toggle button

src/components/layout.js

@@ -22,6 +22,7 @@ const shouldRenderSnow = () => {
 
 function Snow() {
   const [windowSize, setWindowSize] = useState([100, 200])
+  const [snowShowing, setSnowShowing] = useState(true)
 
   useEffect(() => {
     setWindowSize([window.innerWidth, window.innerHeight])
@@ -35,17 +36,25 @@ function Snow() {
   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>,
+    <>
+      <div
+        onClick={() => setSnowShowing(!snowShowing)}
+        className={styles.snowToggleButton}
+      >
+        Hó on/off
+      </div>
+      <div
+        style={{
+          pointerEvents: 'none',
+          zIndex: 900,
+          position: 'fixed',
+          width: `${windowSize[0]}px`,
+          height: `${windowSize[1]}px`,
+        }}
+      >
+        {snowShowing && <Snowfall snowflakeCount={snowflakeCount} />}
+      </div>
+    </>,
     document.body
   )
 }

src/components/layout.module.css

@@ -246,3 +246,20 @@
     top: 10px;
   }
 }
+
+.snowToggleButton {
+  color: #fcdb8c;
+  background-color: #303030;
+  z-index: 901;
+  position: fixed;
+  border-radius: 4px;
+  padding: 4px;
+  bottom: 20px;
+  right: 20px;
+  cursor: pointer;
+  opacity: 50%;
+}
+
+.snowToggleButton:hover {
+  opacity: 100%;
+}