diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js b/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js index 658bbdb302db..5f9acbd12ef0 100644 --- a/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js +++ b/packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js @@ -7,9 +7,11 @@ import {useState, useCallback, useEffect} from 'react'; import {useLocation} from '@docusaurus/router'; +import useLocationHash from '@theme/hooks/useLocationHash'; const useHideableNavbar = hideOnScroll => { const [isNavbarVisible, setIsNavbarVisible] = useState(true); + const [isFocusedAnchor, setIsFocusedAnchor] = useState(false); const [lastScrollTop, setLastScrollTop] = useState(0); const [navbarHeight, setNavbarHeight] = useState(0); const navbarRef = useCallback(node => { @@ -18,6 +20,7 @@ const useHideableNavbar = hideOnScroll => { } }, []); const location = useLocation(); + const [hash, setHash] = useLocationHash(location.hash); const handleScroll = () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; @@ -26,11 +29,10 @@ const useHideableNavbar = hideOnScroll => { return; } - const focusedElement = document.activeElement; - - if (focusedElement && /^#/.test(window.location.hash)) { + if (isFocusedAnchor) { + setIsFocusedAnchor(false); setIsNavbarVisible(false); - focusedElement.blur(); + setLastScrollTop(scrollTop); return; } @@ -59,9 +61,26 @@ const useHideableNavbar = hideOnScroll => { }, [lastScrollTop, navbarHeight]); useEffect(() => { + if (!hideOnScroll) { + return; + } + setIsNavbarVisible(true); + setHash(location.hash); }, [location]); + useEffect(() => { + if (!hideOnScroll) { + return; + } + + if (!hash) { + return; + } + + setIsFocusedAnchor(true); + }, [hash]); + return { navbarRef, isNavbarVisible, diff --git a/packages/docusaurus-theme-classic/src/theme/hooks/useLocationHash.js b/packages/docusaurus-theme-classic/src/theme/hooks/useLocationHash.js new file mode 100644 index 000000000000..13c1593f27bb --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/hooks/useLocationHash.js @@ -0,0 +1,24 @@ +/** + * Copyright (c) 2017-present, Facebook, Inc. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import {useState, useEffect} from 'react'; + +function useLocationHash(initialHash) { + const [hash, setHash] = useState(initialHash); + + useEffect(() => { + const handleHashChange = () => setHash(window.location.hash); + + window.addEventListener('hashchange', handleHashChange); + + return () => window.removeEventListener('hashchange', handleHashChange); + }, []); + + return [hash, setHash]; +} + +export default useLocationHash;