From d391a2bcdbe7d5096d08be88d8bf5467e70264a8 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 25 May 2020 20:47:40 +0300 Subject: [PATCH] fix(v2): enable scrolling for sidebar menu only (#2645) * fix(v2): enable scrolling for sidebar menu only * Add support for announcement bar * fix: remove redundant styles --- .../src/theme/AnnouncementBar/index.js | 39 +++-------- .../theme/AnnouncementBar/styles.module.css | 11 +++ .../src/theme/AnnouncementBarContext.js | 15 ++++ .../theme/AnnouncementBarProvider/index.js | 24 +++++++ .../src/theme/DocSidebar/index.js | 11 ++- .../src/theme/DocSidebar/styles.module.css | 16 ++++- .../src/theme/Layout/index.js | 68 ++++++++++--------- .../src/theme/hooks/useAnnouncementBar.js | 52 ++++++++++++++ .../theme/hooks/useAnnouncementBarContext.js | 15 ++++ 9 files changed, 186 insertions(+), 65 deletions(-) create mode 100644 packages/docusaurus-theme-classic/src/theme/AnnouncementBarContext.js create mode 100644 packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js create mode 100644 packages/docusaurus-theme-classic/src/theme/hooks/useAnnouncementBar.js create mode 100644 packages/docusaurus-theme-classic/src/theme/hooks/useAnnouncementBarContext.js diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js index a1bc0359b3..475aaf51f1 100644 --- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/index.js @@ -5,44 +5,23 @@ * LICENSE file in the root directory of this source tree. */ -import React, {useState, useEffect} from 'react'; +import React from 'react'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useAnnouncementBarContext from '@theme/hooks/useAnnouncementBarContext'; import styles from './styles.module.css'; -const STORAGE_DISMISS_KEY = 'docusaurus.announcement.dismiss'; -const STORAGE_ID_KEY = 'docusaurus.announcement.id'; - function AnnouncementBar() { const { siteConfig: {themeConfig: {announcementBar = {}}} = {}, } = useDocusaurusContext(); - const {id, content, backgroundColor, textColor} = announcementBar; - const [isClosed, setClosed] = useState(true); - const handleClose = () => { - localStorage.setItem(STORAGE_DISMISS_KEY, true); - setClosed(true); - }; + const {content, backgroundColor, textColor} = announcementBar; + const { + isAnnouncementBarClosed, + closeAnnouncementBar, + } = useAnnouncementBarContext(); - useEffect(() => { - const viewedId = localStorage.getItem(STORAGE_ID_KEY); - const isNewAnnouncement = id !== viewedId; - - localStorage.setItem(STORAGE_ID_KEY, id); - - if (isNewAnnouncement) { - localStorage.setItem(STORAGE_DISMISS_KEY, false); - } - - if ( - isNewAnnouncement || - localStorage.getItem(STORAGE_DISMISS_KEY) === 'false' - ) { - setClosed(false); - } - }, []); - - if (!content || isClosed) { + if (!content || isAnnouncementBarClosed) { return null; } @@ -59,7 +38,7 @@ function AnnouncementBar() { diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css index 6b4ca286e2..12350cc8ec 100644 --- a/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBar/styles.module.css @@ -5,13 +5,24 @@ * LICENSE file in the root directory of this source tree. */ +:root { + --docusaurus-announcement-bar-height: auto; +} + .announcementBar { position: relative; width: 100%; + height: var(--docusaurus-announcement-bar-height); background-color: var(--ifm-color-primary); color: var(--ifm-color-black); } +@media screen and (min-width: 1024px) { + :root { + --docusaurus-announcement-bar-height: 30px; + } +} + .announcementBarClose { position: absolute; right: 0; diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBarContext.js b/packages/docusaurus-theme-classic/src/theme/AnnouncementBarContext.js new file mode 100644 index 0000000000..1d1adbe889 --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBarContext.js @@ -0,0 +1,15 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import {createContext} from 'react'; + +const AnnouncementBarContext = createContext({ + isAnnouncementBarClosed: false, + closeAnnouncementBar: () => {}, +}); + +export default AnnouncementBarContext; diff --git a/packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js b/packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js new file mode 100644 index 0000000000..e35dfdd1db --- /dev/null +++ b/packages/docusaurus-theme-classic/src/theme/AnnouncementBarProvider/index.js @@ -0,0 +1,24 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React from 'react'; + +import AnnouncementBarContext from '@theme/AnnouncementBarContext'; +import useAnnouncementBar from '@theme/hooks/useAnnouncementBar'; + +function AnnouncementBarProvider(props) { + const {isAnnouncementBarClosed, closeAnnouncementBar} = useAnnouncementBar(); + + return ( + + {props.children} + + ); +} + +export default AnnouncementBarProvider; diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js index 623987d949..cad9db38d5 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js @@ -8,8 +8,10 @@ import React, {useState, useCallback} from 'react'; import classnames from 'classnames'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; +import useAnnouncementBarContext from '@theme/hooks/useAnnouncementBarContext'; import useLockBodyScroll from '@theme/hooks/useLockBodyScroll'; import useLogo from '@theme/hooks/useLogo'; +import useScrollPosition from '@theme/hooks/useScrollPosition'; import Link from '@docusaurus/Link'; import isInternalUrl from '@docusaurus/isInternalUrl'; @@ -134,6 +136,8 @@ function DocSidebar(props) { isClient, } = useDocusaurusContext(); const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo(); + const {isAnnouncementBarClosed} = useAnnouncementBarContext(); + const {scrollY} = useScrollPosition(); const { docsSidebars, @@ -163,7 +167,10 @@ function DocSidebar(props) { } return ( -
+
{hideOnScroll && (