3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-02 08:19:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): use transform instead of top position for hideable navbar (#4194)

Browse source 
* refactor(v2): use translateY instead of top to hide navbar

* Use translate3d instead of translateY
This commit is contained in:
Alexey Pyltsyn 2021-02-08 18:13:56 +03:00 • committed by GitHub
parent d6510b63ae
commit 174b4200ee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

5
packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
View file

@ -18,9 +18,10 @@
}
.navbarHideable {
transition: top 0.2s ease-in-out;
transform: translate3d(0, 0, 0);
transition: transform var(--ifm-transition-fast) ease;
}
.navbarHidden {
top: calc(var(--ifm-navbar-height) * -1) !important;
transform: translate3d(0, calc(var(--ifm-navbar-height) * -1), 0);
}

2
packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.ts
View file

@ -12,7 +12,7 @@ import type {useHideableNavbarReturns} from '@theme/hooks/useHideableNavbar';
const useHideableNavbar = (hideOnScroll: boolean): useHideableNavbarReturns => {
const location = useLocation();
const [isNavbarVisible, setIsNavbarVisible] = useState(!hideOnScroll);
const [isNavbarVisible, setIsNavbarVisible] = useState(hideOnScroll);
const isFocusedAnchor = useRef(false);
const [lastScrollTop, setLastScrollTop] = useState(0);
const [navbarHeight, setNavbarHeight] = useState(0);