Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(v2): hide navbar on scroll #2055

Merged
merged 4 commits into from
Dec 12, 2019
Merged

feat(v2): hide navbar on scroll #2055

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a3c3075
feat(v2): hide navbar on scroll
lex111 Nov 25, 2019
599f3c4
Turn on hide option
lex111 Nov 25, 2019
0bacab5
Merge branch 'master' into hide-navbar
lex111 Dec 9, 2019
e7db3f5
Refactor after review
lex111 Dec 9, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 10 additions & 4 deletions packages/docusaurus-theme-classic/src/theme/Navbar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import Toggle from '@theme/Toggle';
import classnames from 'classnames';

import useTheme from '@theme/hooks/useTheme';
import useHideableNavbar from '@theme/hooks/useHideableNavbar';

import styles from './styles.module.css';

Expand All @@ -43,13 +44,15 @@ function NavLink({to, href, label, position, ...props}) {

function Navbar() {
const context = useDocusaurusContext();
const [sidebarShown, setSidebarShown] = useState(false);
const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
const [theme, setTheme] = useTheme();
const {siteConfig = {}} = context;
const {baseUrl, themeConfig = {}} = siteConfig;
const {navbar = {}, disableDarkMode = false} = themeConfig;
const {title, logo = {}, links = []} = navbar;
const {title, logo = {}, links = [], hideOnScroll = false} = navbar;
const [sidebarShown, setSidebarShown] = useState(false);
const [isSearchBarExpanded, setIsSearchBarExpanded] = useState(false);
const [theme, setTheme] = useTheme();

const {navbarRef, isNavbarVisible} = useHideableNavbar(hideOnScroll);

const showSidebar = useCallback(() => {
setSidebarShown(true);
Expand All @@ -71,8 +74,11 @@ function Navbar() {
<html lang="en" data-theme={theme} />
</Head>
<nav
ref={navbarRef}
className={classnames('navbar', 'navbar--light', 'navbar--fixed-top', {
'navbar-sidebar--show': sidebarShown,
[styles.navbarHideable]: hideOnScroll,
[styles.navbarHidden]: !isNavbarVisible,
})}>
<div className="navbar__inner">
<div className="navbar__items">
Expand Down
8 changes: 8 additions & 0 deletions packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,11 @@
display: none;
}
}

.navbarHideable {
transition: top 0.2s ease-in-out;
}

.navbarHidden {
top: calc(var(--ifm-navbar-height) * -1) !important;
}
56 changes: 56 additions & 0 deletions packages/docusaurus-theme-classic/src/theme/hooks/useHideableNavbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
/**
* 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 React, {useState, useCallback, useEffect} from 'react'; // eslint-disable-line no-unused-vars
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why need eslint disable ? is it React :O


const useHideableNavbar = hideOnScroll => {
const [isNavbarVisible, setIsNavbarVisible] = useState(true);
const [lastScrollTop, setLastScrollTop] = useState(0);
const [navbarHeight, setNavbarHeight] = useState(0);
const navbarRef = useCallback(node => {
if (node !== null) {
setNavbarHeight(node.getBoundingClientRect().height);
}
}, []);

const handleScroll = () => {
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
const documentHeight = document.documentElement.scrollHeight - navbarHeight;
const windowHeight = window.innerHeight;

if (scrollTop < navbarHeight) {
return;
}

if (lastScrollTop && scrollTop > lastScrollTop) {
setIsNavbarVisible(false);
} else if (scrollTop + windowHeight < documentHeight) {
setIsNavbarVisible(true);
}

setLastScrollTop(scrollTop);
};

useEffect(() => {
if (!hideOnScroll) {
return undefined;
}

window.addEventListener('scroll', handleScroll);

return () => {
window.removeEventListener('scroll', handleScroll);
};
}, [lastScrollTop, navbarHeight]);

return {
navbarRef,
isNavbarVisible,
};
};

export default useHideableNavbar;
17 changes: 17 additions & 0 deletions website/docs/theme-classic.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,23 @@ module.exports = {

Outbound links automatically get `target="_blank" rel="noopener noreferrer"`.

### Auto-hide sticky navbar

You can enable this cool UI feature that automatically hides the navbar when a user starts scrolling down the page, and show it again when the user scrolls up.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it feels a bit weird that here we first address reader by "you" then later on say "a user" or "the user". I think it is ok to keep using you.

just personal opinion: i prefer it to be less objective. "cool" is also a very vague adjective and i found it a bit weird to read this from our docs


```js
// docusaurus/config.js
module.exports = {
...
themeConfig: {
navbar: {
hideOnScroll: true,
},
...
},
}
```

## Footer

## `CodeBlock`
Expand Down
1 change: 1 addition & 0 deletions website/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ module.exports = {
},
},
navbar: {
hideOnScroll: true,
title: 'Docusaurus',
logo: {
alt: 'Docusaurus Logo',
Expand Down