From 1430b391e45ac5f5642a11077334845efbfb5b18 Mon Sep 17 00:00:00 2001 From: Katie Zutter Date: Tue, 2 Mar 2021 14:04:59 -0600 Subject: [PATCH 1/9] trying some things --- .../AnimatedGlobalHeader/index.tsx | 48 ++++++++++++++++--- .../AnimatedGlobalHeader/styles.module.scss | 4 -- .../Molecules/GlobalHeader.stories.mdx | 40 ++++++++++++++++ 3 files changed, 82 insertions(+), 10 deletions(-) diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx index 54e6cd09e95..692d4677af5 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx +++ b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx @@ -1,3 +1,4 @@ +import { Box } from '@codecademy/gamut'; import cx from 'classnames'; import React, { useCallback, useEffect, useState } from 'react'; @@ -74,17 +75,50 @@ export const AnimatedGlobalHeader: React.FC = (props) => { }; }, [handleScrolling]); + const stickyBox = document.getElementById('stickyBox'); + const staticBox = document.getElementById('staticBox'); + const placeholderBox = document.getElementById('headerPlaceholder'); + + stickyBox && + stickyBox.addEventListener('transitionend', () => { + if (stickyBox.className.includes('transitionOpacity')) { + stickyBox.style.display = 'none'; + console.log('sticky header display set to none'); + } + }); + stickyBox && + placeholderBox && + staticBox && + stickyBox.addEventListener('transitionstart', () => { + if (stickyBox.className.includes('transitionOpacity')) { + placeholderBox.style.display = 'none'; + staticBox.style.display = 'block'; + + console.log('static header display set to block'); + } + }); + + if (staticBox && stickyBox && placeholderBox && !isScrollingDown) { + stickyBox.style.display = 'block'; + staticBox.style.display = 'none'; + placeholderBox.style.display = 'block'; + } + return ( + // padding box would need to be smaller for mobile <> - + - + + + = (props) => { ], isInHeaderRegion && [styles.transitionOpacity, styles.visuallyHide] )} - /> + > + + ); }; diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss index b67776d00ed..ad7e9a25549 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss +++ b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss @@ -38,7 +38,3 @@ .transitionSlide { transition: transform 0.15s ease-in-out; } - -.transitionFade { - transition: background 0.5s ease-in-out, border-bottom 0.5s ease-in-out; -} diff --git a/packages/styleguide/stories/Labs/Experimental/Molecules/GlobalHeader.stories.mdx b/packages/styleguide/stories/Labs/Experimental/Molecules/GlobalHeader.stories.mdx index 3fe9dfb5e29..eb89b23b80b 100644 --- a/packages/styleguide/stories/Labs/Experimental/Molecules/GlobalHeader.stories.mdx +++ b/packages/styleguide/stories/Labs/Experimental/Molecules/GlobalHeader.stories.mdx @@ -305,3 +305,43 @@ A version of the header with just the logo, for use when data has not been fetch {(args) => {}} type="loading" />} + +### GlobalHeader With Animations + + + + {(args) => ( + + {}} + animated + renderNotifications={{ + desktop: () => , + mobile: () => , + }} + renderSearch={{ + desktop: () => , + mobile: () => ( + + Mobile Search Bar [Placeholder] + + ), + }} + type="pro" + user={{ + avatar: + 'https://www.gravatar.com/avatar/1c959a9a1e2f9f9f1ac06b05cccc1d60?s=150&d=retro', + displayName: 'Codey', + }} + /> + + + + )} + + From 4a6fc79ff98ab19f5d60c8d1ceb60fef6afc9138 Mon Sep 17 00:00:00 2001 From: Katie Zutter Date: Tue, 2 Mar 2021 20:49:28 -0600 Subject: [PATCH 2/9] consolidate to one header --- .../AnimatedGlobalHeader/index.tsx | 79 +++++-------------- .../AnimatedGlobalHeader/styles.module.scss | 24 ++---- .../GlobalHeader/BasicGlobalHeader/index.tsx | 7 +- 3 files changed, 31 insertions(+), 79 deletions(-) diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx index 692d4677af5..b4abb4852a7 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx +++ b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx @@ -3,7 +3,11 @@ import cx from 'classnames'; import React, { useCallback, useEffect, useState } from 'react'; import { GlobalHeaderProps } from '..'; -import { BasicGlobalHeader } from '../BasicGlobalHeader'; +import { + BasicGlobalHeader, + desktopHeight, + mobileHeight, +} from '../BasicGlobalHeader'; import styles from './styles.module.scss'; const defaultScrollingState = { @@ -75,68 +79,21 @@ export const AnimatedGlobalHeader: React.FC = (props) => { }; }, [handleScrolling]); - const stickyBox = document.getElementById('stickyBox'); - const staticBox = document.getElementById('staticBox'); - const placeholderBox = document.getElementById('headerPlaceholder'); - - stickyBox && - stickyBox.addEventListener('transitionend', () => { - if (stickyBox.className.includes('transitionOpacity')) { - stickyBox.style.display = 'none'; - console.log('sticky header display set to none'); - } - }); - stickyBox && - placeholderBox && - staticBox && - stickyBox.addEventListener('transitionstart', () => { - if (stickyBox.className.includes('transitionOpacity')) { - placeholderBox.style.display = 'none'; - staticBox.style.display = 'block'; - - console.log('static header display set to block'); - } - }); - - if (staticBox && stickyBox && placeholderBox && !isScrollingDown) { - stickyBox.style.display = 'block'; - staticBox.style.display = 'none'; - placeholderBox.style.display = 'block'; - } - return ( - // padding box would need to be smaller for mobile - <> - - - - - + - - - + {...props} + /> + ); }; diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss index ad7e9a25549..063dbd70690 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss +++ b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss @@ -15,26 +15,18 @@ width: 100%; } -.visuallyShow { - opacity: 1; -} - -.visuallyHide { - opacity: 0; -} - -.translateDown { +.transitionSlideDown { transform: translateY(0); + transition: transform 0.15s ease-in-out; } -.translateUp { +.transitionSlideUp { transform: translateY(-100%); + transition: transform 0.15s ease-in-out; } -.transitionOpacity { - transition: opacity 0.5s ease-in-out; -} - -.transitionSlide { - transition: transform 0.15s ease-in-out; +.transitionFadeOut { + background: transparent; + border-bottom: 1px solid transparent; + transition: background 0.5s ease-in-out, border-bottom 0.5s ease-in-out; } diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx b/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx index 4b6457088e3..eef6eb950f3 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx +++ b/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx @@ -31,6 +31,9 @@ export type GlobalHeaderProps = | ProHeader | LoadingHeader; +export const desktopHeight = '80'; +export const mobileHeight = '64'; + const getAppHeaderItems = ( props: GlobalHeaderProps ): FormattedAppHeaderItems => { @@ -98,14 +101,14 @@ export const BasicGlobalHeader: React.FC = (props) => { <> Date: Wed, 3 Mar 2021 09:53:46 -0600 Subject: [PATCH 3/9] remove animation story --- .../Molecules/GlobalHeader.stories.mdx | 40 ------------------- 1 file changed, 40 deletions(-) diff --git a/packages/styleguide/stories/Labs/Experimental/Molecules/GlobalHeader.stories.mdx b/packages/styleguide/stories/Labs/Experimental/Molecules/GlobalHeader.stories.mdx index eb89b23b80b..3fe9dfb5e29 100644 --- a/packages/styleguide/stories/Labs/Experimental/Molecules/GlobalHeader.stories.mdx +++ b/packages/styleguide/stories/Labs/Experimental/Molecules/GlobalHeader.stories.mdx @@ -305,43 +305,3 @@ A version of the header with just the logo, for use when data has not been fetch {(args) => {}} type="loading" />} - -### GlobalHeader With Animations - - - - {(args) => ( - - {}} - animated - renderNotifications={{ - desktop: () => , - mobile: () => , - }} - renderSearch={{ - desktop: () => , - mobile: () => ( - - Mobile Search Bar [Placeholder] - - ), - }} - type="pro" - user={{ - avatar: - 'https://www.gravatar.com/avatar/1c959a9a1e2f9f9f1ac06b05cccc1d60?s=150&d=retro', - displayName: 'Codey', - }} - /> - - - - )} - - From 3f72f3618bb3fe5329d660028c64c5e1dee813c1 Mon Sep 17 00:00:00 2001 From: Katie Zutter Date: Wed, 3 Mar 2021 16:47:22 -0600 Subject: [PATCH 4/9] fix scroll up transition issue --- .../AnimatedGlobalHeader/index.tsx | 26 ++++++++++++++----- .../AnimatedGlobalHeader/styles.module.scss | 4 +++ .../GlobalHeader/BasicGlobalHeader/index.tsx | 8 +++--- 3 files changed, 27 insertions(+), 11 deletions(-) diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx index b4abb4852a7..61c08ecb17f 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx +++ b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx @@ -11,7 +11,8 @@ import { import styles from './styles.module.scss'; const defaultScrollingState = { - isInHeaderRegion: true, + isAtTopOfPage: true, + isInsideHeaderRegion: true, isScrollingDown: true, isScrollingDownFromHeaderRegion: true, prevScrollPosition: typeof window === 'undefined' ? 0 : window?.pageYOffset, @@ -22,7 +23,8 @@ export const AnimatedGlobalHeader: React.FC = (props) => { const { isScrollingDownFromHeaderRegion, - isInHeaderRegion, + isAtTopOfPage, + isInsideHeaderRegion, isScrollingDown, prevScrollPosition, } = scrollingState; @@ -54,13 +56,20 @@ export const AnimatedGlobalHeader: React.FC = (props) => { if (currentScrollPosition === 0) { setScrollingState((prevState) => ({ ...prevState, - isInHeaderRegion: true, + isAtTopOfPage: true, + isInsideHeaderRegion: true, isScrollingDownFromHeaderRegion: true, })); + } else if (currentScrollPosition < desktopHeight) { + setScrollingState((prevState) => ({ + ...prevState, + isInsideHeaderRegion: true, + })); } else { setScrollingState((prevState) => ({ ...prevState, - isInHeaderRegion: false, + isAtTopOfPage: false, + isInsideHeaderRegion: false, isScrollingDownFromHeaderRegion: prevState.isScrollingDown && prevState.isScrollingDownFromHeaderRegion, @@ -80,17 +89,20 @@ export const AnimatedGlobalHeader: React.FC = (props) => { }, [handleScrolling]); return ( - + diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss index 063dbd70690..6674f2f26b7 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss +++ b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss @@ -20,6 +20,10 @@ transition: transform 0.15s ease-in-out; } +.slideUp { + transform: translateY(-100%); +} + .transitionSlideUp { transform: translateY(-100%); transition: transform 0.15s ease-in-out; diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx b/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx index eef6eb950f3..20f2c617abc 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx +++ b/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx @@ -31,8 +31,8 @@ export type GlobalHeaderProps = | ProHeader | LoadingHeader; -export const desktopHeight = '80'; -export const mobileHeight = '64'; +export const desktopHeight = 80; +export const mobileHeight = 64; const getAppHeaderItems = ( props: GlobalHeaderProps @@ -101,14 +101,14 @@ export const BasicGlobalHeader: React.FC = (props) => { <> Date: Thu, 4 Mar 2021 16:47:36 -0600 Subject: [PATCH 5/9] fix isInsideHeaderRegion to account for mobile --- .../GlobalHeader/AnimatedGlobalHeader/index.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx index 61c08ecb17f..4d900bf5889 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx +++ b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx @@ -2,6 +2,7 @@ import { Box } from '@codecademy/gamut'; import cx from 'classnames'; import React, { useCallback, useEffect, useState } from 'react'; +import { useBreakpointAtOrAbove } from '../../../lib/breakpointHooks'; import { GlobalHeaderProps } from '..'; import { BasicGlobalHeader, @@ -19,6 +20,8 @@ const defaultScrollingState = { }; export const AnimatedGlobalHeader: React.FC = (props) => { + const isDesktop = useBreakpointAtOrAbove('md'); + const [scrollingState, setScrollingState] = useState(defaultScrollingState); const { @@ -60,7 +63,9 @@ export const AnimatedGlobalHeader: React.FC = (props) => { isInsideHeaderRegion: true, isScrollingDownFromHeaderRegion: true, })); - } else if (currentScrollPosition < desktopHeight) { + } else if ( + currentScrollPosition < (isDesktop ? desktopHeight : mobileHeight) + ) { setScrollingState((prevState) => ({ ...prevState, isInsideHeaderRegion: true, @@ -75,7 +80,7 @@ export const AnimatedGlobalHeader: React.FC = (props) => { prevState.isScrollingDownFromHeaderRegion, })); } - }, [prevScrollPosition]); + }, [prevScrollPosition, isDesktop]); useEffect(() => { window?.addEventListener('scroll', handleScrolling, { From 96a9f7c0edc024b2fdc7e90b44ce21e25f9598d4 Mon Sep 17 00:00:00 2001 From: Katie Zutter Date: Fri, 5 Mar 2021 07:56:46 -0600 Subject: [PATCH 6/9] use beautiful new theme.elements.headerHeight --- .../GlobalHeader/AnimatedGlobalHeader/index.tsx | 16 +++++----------- .../GlobalHeader/BasicGlobalHeader/index.tsx | 4 ++-- 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx index 4d900bf5889..bbe3c09ae02 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx +++ b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx @@ -1,14 +1,10 @@ import { Box } from '@codecademy/gamut'; +import { theme } from '@codecademy/gamut-styles'; import cx from 'classnames'; import React, { useCallback, useEffect, useState } from 'react'; -import { useBreakpointAtOrAbove } from '../../../lib/breakpointHooks'; import { GlobalHeaderProps } from '..'; -import { - BasicGlobalHeader, - desktopHeight, - mobileHeight, -} from '../BasicGlobalHeader'; +import { BasicGlobalHeader } from '../BasicGlobalHeader'; import styles from './styles.module.scss'; const defaultScrollingState = { @@ -20,8 +16,6 @@ const defaultScrollingState = { }; export const AnimatedGlobalHeader: React.FC = (props) => { - const isDesktop = useBreakpointAtOrAbove('md'); - const [scrollingState, setScrollingState] = useState(defaultScrollingState); const { @@ -64,7 +58,7 @@ export const AnimatedGlobalHeader: React.FC = (props) => { isScrollingDownFromHeaderRegion: true, })); } else if ( - currentScrollPosition < (isDesktop ? desktopHeight : mobileHeight) + currentScrollPosition < parseInt(theme.elements.headerHeight, 10) ) { setScrollingState((prevState) => ({ ...prevState, @@ -80,7 +74,7 @@ export const AnimatedGlobalHeader: React.FC = (props) => { prevState.isScrollingDownFromHeaderRegion, })); } - }, [prevScrollPosition, isDesktop]); + }, [prevScrollPosition]); useEffect(() => { window?.addEventListener('scroll', handleScrolling, { @@ -94,7 +88,7 @@ export const AnimatedGlobalHeader: React.FC = (props) => { }, [handleScrolling]); return ( - + = (props) => { <> Date: Fri, 5 Mar 2021 07:57:53 -0600 Subject: [PATCH 7/9] remove unnecessary variables --- .../src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx b/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx index 17454023b68..4b6457088e3 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx +++ b/packages/gamut-labs/src/experimental/GlobalHeader/BasicGlobalHeader/index.tsx @@ -31,9 +31,6 @@ export type GlobalHeaderProps = | ProHeader | LoadingHeader; -export const desktopHeight = 80; -export const mobileHeight = 64; - const getAppHeaderItems = ( props: GlobalHeaderProps ): FormattedAppHeaderItems => { From 0abe828d6fa1bcea5efb0837528c0cdcd81e36bb Mon Sep 17 00:00:00 2001 From: Katie Zutter Date: Fri, 5 Mar 2021 11:03:30 -0600 Subject: [PATCH 8/9] remove slide up/down transitions --- .../AnimatedGlobalHeader/index.tsx | 80 ++----------------- .../AnimatedGlobalHeader/styles.module.scss | 22 +---- 2 files changed, 8 insertions(+), 94 deletions(-) diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx index bbe3c09ae02..b2f490e2935 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx +++ b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx @@ -7,74 +7,17 @@ import { GlobalHeaderProps } from '..'; import { BasicGlobalHeader } from '../BasicGlobalHeader'; import styles from './styles.module.scss'; -const defaultScrollingState = { - isAtTopOfPage: true, - isInsideHeaderRegion: true, - isScrollingDown: true, - isScrollingDownFromHeaderRegion: true, - prevScrollPosition: typeof window === 'undefined' ? 0 : window?.pageYOffset, -}; - export const AnimatedGlobalHeader: React.FC = (props) => { - const [scrollingState, setScrollingState] = useState(defaultScrollingState); - - const { - isScrollingDownFromHeaderRegion, - isAtTopOfPage, - isInsideHeaderRegion, - isScrollingDown, - prevScrollPosition, - } = scrollingState; + const [isInHeaderRegion, setIsInHeaderRegion] = useState(true); const handleScrolling = useCallback(() => { const currentScrollPosition = typeof window === 'undefined' ? 0 : window?.pageYOffset; - // handle down/up scrolling - if (currentScrollPosition > prevScrollPosition) { - setScrollingState((prevState) => { - return { - ...prevState, - isScrollingDown: true, - prevScrollPosition: currentScrollPosition, - }; - }); - } else { - setScrollingState((prevState) => { - return { - ...prevState, - isScrollingDown: false, - prevScrollPosition: currentScrollPosition, - }; - }); - } - - // handle static header region - if (currentScrollPosition === 0) { - setScrollingState((prevState) => ({ - ...prevState, - isAtTopOfPage: true, - isInsideHeaderRegion: true, - isScrollingDownFromHeaderRegion: true, - })); - } else if ( - currentScrollPosition < parseInt(theme.elements.headerHeight, 10) - ) { - setScrollingState((prevState) => ({ - ...prevState, - isInsideHeaderRegion: true, - })); - } else { - setScrollingState((prevState) => ({ - ...prevState, - isAtTopOfPage: false, - isInsideHeaderRegion: false, - isScrollingDownFromHeaderRegion: - prevState.isScrollingDown && - prevState.isScrollingDownFromHeaderRegion, - })); - } - }, [prevScrollPosition]); + currentScrollPosition === 0 + ? setIsInHeaderRegion(true) + : setIsInHeaderRegion(false); + }, []); useEffect(() => { window?.addEventListener('scroll', handleScrolling, { @@ -91,17 +34,8 @@ export const AnimatedGlobalHeader: React.FC = (props) => { diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss index 6674f2f26b7..5fbeb5e3a13 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss +++ b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/styles.module.scss @@ -1,34 +1,14 @@ @import "~@codecademy/gamut-styles/utils"; -.staticHeader { - background: transparent; - border-bottom: 1px solid transparent; - position: static; -} - .stickyHeader { border-bottom: 1px solid $color-navy; - background-color: white; + background-color: $color-white; position: fixed; top: 0; z-index: 2; width: 100%; } -.transitionSlideDown { - transform: translateY(0); - transition: transform 0.15s ease-in-out; -} - -.slideUp { - transform: translateY(-100%); -} - -.transitionSlideUp { - transform: translateY(-100%); - transition: transform 0.15s ease-in-out; -} - .transitionFadeOut { background: transparent; border-bottom: 1px solid transparent; From ffe59c0ad9c9b6a2fe03770d3d5874a6df91fcc3 Mon Sep 17 00:00:00 2001 From: Jasmine English Date: Fri, 5 Mar 2021 15:43:02 -0500 Subject: [PATCH 9/9] useTheme, useWindowScroll --- .../AnimatedGlobalHeader/index.tsx | 27 +++++-------------- 1 file changed, 6 insertions(+), 21 deletions(-) diff --git a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx index b2f490e2935..de6a4a447ae 100644 --- a/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx +++ b/packages/gamut-labs/src/experimental/GlobalHeader/AnimatedGlobalHeader/index.tsx @@ -1,34 +1,19 @@ import { Box } from '@codecademy/gamut'; -import { theme } from '@codecademy/gamut-styles'; +import { useTheme } from '@emotion/react'; import cx from 'classnames'; -import React, { useCallback, useEffect, useState } from 'react'; +import React from 'react'; +import { useWindowScroll } from 'react-use'; import { GlobalHeaderProps } from '..'; import { BasicGlobalHeader } from '../BasicGlobalHeader'; import styles from './styles.module.scss'; export const AnimatedGlobalHeader: React.FC = (props) => { - const [isInHeaderRegion, setIsInHeaderRegion] = useState(true); + const { y } = useWindowScroll(); - const handleScrolling = useCallback(() => { - const currentScrollPosition = - typeof window === 'undefined' ? 0 : window?.pageYOffset; + const isInHeaderRegion = y === 0; - currentScrollPosition === 0 - ? setIsInHeaderRegion(true) - : setIsInHeaderRegion(false); - }, []); - - useEffect(() => { - window?.addEventListener('scroll', handleScrolling, { - passive: true, - }); - - // returned function will be called on component unmount - return () => { - window?.removeEventListener('scroll', handleScrolling); - }; - }, [handleScrolling]); + const theme = useTheme(); return (