diff --git a/cashtab/package-lock.json b/cashtab/package-lock.json --- a/cashtab/package-lock.json +++ b/cashtab/package-lock.json @@ -1,12 +1,12 @@ { "name": "cashtab", - "version": "2.34.3", + "version": "2.34.4", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "cashtab", - "version": "2.34.3", + "version": "2.34.4", "dependencies": { "@bitgo/utxo-lib": "^9.33.0", "@zxing/browser": "^0.1.4", diff --git a/cashtab/package.json b/cashtab/package.json --- a/cashtab/package.json +++ b/cashtab/package.json @@ -1,6 +1,6 @@ { "name": "cashtab", - "version": "2.34.3", + "version": "2.34.4", "private": true, "scripts": { "start": "node scripts/start.js", diff --git a/cashtab/src/components/App/App.js b/cashtab/src/components/App/App.js --- a/cashtab/src/components/App/App.js +++ b/cashtab/src/components/App/App.js @@ -95,7 +95,8 @@ const walletState = getWalletState(wallet); const { balanceSats } = walletState; const [navMenuClicked, setNavMenuClicked] = useState(false); - const [scrollYPosition, setScrollYPosition] = React.useState(0); + const [scrollY, setScrollY] = useState(0); + const [minifiedMenu, setMinifiedMenu] = useState(false); const handleNavMenuClick = () => setNavMenuClicked(!navMenuClicked); // If wallet is unmigrated, do not show page until it has migrated // An invalid wallet will be validated/populated after the next API call, ETA 10s @@ -103,26 +104,29 @@ const location = useLocation(); const navigate = useNavigate(); + const PIN_MINIFIED_WALLET_MENU_SCROLLY = 63; + const UNPIN_MINIFIED_WALLET_MENU_SCROLLY = 15; const handleScroll = () => { - setScrollYPosition(window.scrollY); + setScrollY(window.scrollY); }; + useEffect(() => { + if (scrollY > PIN_MINIFIED_WALLET_MENU_SCROLLY && !minifiedMenu) { + // If the user has scrolled DOWN past PIN_MINIFIED_WALLET_MENU_SCROLLY and the menu IS NOT minified + // Minify the menu + setMinifiedMenu(true); + } else if ( + scrollY < UNPIN_MINIFIED_WALLET_MENU_SCROLLY && + minifiedMenu + ) { + // If the user has scrolled UP past UNPIN_MINIFIED_WALLET_MENU_SCROLLY and the menu IS minified + // Unminify the menu + setMinifiedMenu(false); + } + }, [scrollY, minifiedMenu]); // Only execute handleScroll if it has not been called for 25ms const debouncedHandleScroll = debounce(handleScroll, 25); - // To avoid content jump flickering without using overflow-anchor, - // This cannot exceed the height of the minified wallet menu - // overflow-anchor css rule is not supported across all browsers and devices - // WalletInfoCtn has height set to 63px in styles.js - const PIN_MINIFIED_WALLET_MENU_SCROLLY = 63; - const UNPIN_MINIFIED_WALLET_MENU_SCROLLY = 15; - const minifiedMenu = - scrollYPosition > PIN_MINIFIED_WALLET_MENU_SCROLLY - ? true - : scrollYPosition < UNPIN_MINIFIED_WALLET_MENU_SCROLLY - ? false - : true; - useEffect(() => { window.addEventListener('scroll', debouncedHandleScroll); return () => {