(nextjs) fixed header appearance for SSR

src/constants/ssr.ts

@@ -0,0 +1 @@
+export const isSSR = typeof window === 'undefined';

src/containers/main/Header/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useCallback, useMemo } from 'react';
+import React, { FC, useCallback, useEffect, useMemo, useState } from 'react';
 
 import classNames from 'classnames';
 import isBefore from 'date-fns/isBefore';
@@ -11,6 +11,7 @@ import { Button } from '~/components/input/Button';
 import { Logo } from '~/components/main/Logo';
 import { UserButton } from '~/components/main/UserButton';
 import { Dialog } from '~/constants/modal';
+import { isSSR } from '~/constants/ssr';
 import { URLS } from '~/constants/urls';
 import { useAuth } from '~/hooks/auth/useAuth';
 import { useScrollTop } from '~/hooks/dom/useScrollTop';
@@ -26,6 +27,7 @@ type HeaderProps = {};
 const Header: FC<HeaderProps> = observer(() => {
   const labStats = useGetLabStats();
 
+  const [isScrolled, setIsScrolled] = useState(false);
   const { logout } = useAuth();
   const { showModal } = useModal();
   const { isUser, user } = useAuth();
@@ -52,8 +54,13 @@ const Header: FC<HeaderProps> = observer(() => {
   const hasLabUpdates = useMemo(() => labStats.updates.length > 0, [labStats.updates]);
   const hasFlowUpdates = useMemo(() => flowUpdates.length > 0, [flowUpdates]);
 
+  // Needed for SSR
+  useEffect(() => {
+    setIsScrolled(top > 10);
+  }, [top]);
+
   return (
-    <div className={classNames(styles.wrap, { [styles.is_scrolled]: top > 10 })}>
+    <div className={classNames(styles.wrap, { [styles.is_scrolled]: isScrolled })}>
       <div className={styles.container}>
         <div className={styles.logo_wrapper}>
           <Logo />

src/hooks/dom/useScrollTop.ts

@@ -4,11 +4,14 @@ export const useScrollTop = () => {
   const [top, setTop] = useState(typeof window !== 'undefined' ? window.scrollY : 0);
 
   useEffect(() => {
+    setTop(window.scrollY);
+
     const onScroll = () => {
       setTop(window.scrollY);
     };
 
     window.addEventListener('scroll', onScroll);
+
     return () => window.removeEventListener('scroll', onScroll);
   }, []);