diff --git a/src/constants/ssr.ts b/src/constants/ssr.ts new file mode 100644 index 00000000..3f489e4f --- /dev/null +++ b/src/constants/ssr.ts @@ -0,0 +1 @@ +export const isSSR = typeof window === 'undefined'; diff --git a/src/containers/main/Header/index.tsx b/src/containers/main/Header/index.tsx index 5b3c25d5..01a3bffe 100644 --- a/src/containers/main/Header/index.tsx +++ b/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 = 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 = 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 ( -
10 })}> +
diff --git a/src/hooks/dom/useScrollTop.ts b/src/hooks/dom/useScrollTop.ts index 701d6712..d8e7e066 100644 --- a/src/hooks/dom/useScrollTop.ts +++ b/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); }, []);