From 20bc7cc9911beadad9d564a263b1dd684a8373f1 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 22 Apr 2020 19:55:21 +0300 Subject: [PATCH 1/3] fix(v2): enable scrolling for sidebar menu only --- .../src/theme/DocSidebar/index.js | 5 ++++- .../src/theme/DocSidebar/styles.module.css | 12 +++++++++--- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js index c59c3611f437..7da6890455af 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/index.js @@ -154,7 +154,10 @@ function DocSidebar(props) { } return ( -
+
{hideOnScroll && ( Date: Wed, 22 Apr 2020 21:40:41 +0300 Subject: [PATCH 2/3] Add support for announcement bar --- .../src/theme/AnnouncementBar/index.js | 39 +++-------- .../theme/AnnouncementBar/styles.module.css | 13 ++++ .../src/theme/AnnouncementBarContext.js | 15 +++++ .../theme/AnnouncementBarProvider/index.js | 24 +++++++ .../src/theme/DocSidebar/index.js | 6 ++ .../src/theme/DocSidebar/styles.module.css | 4 ++ .../src/theme/Layout/index.js | 66 ++++++++++--------- .../src/theme/hooks/useAnnouncementBar.js | 52 +++++++++++++++ .../theme/hooks/useAnnouncementBarContext.js | 15 +++++ 9 files changed, 174 insertions(+), 60 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 a1bc0359b365..475aaf51f131 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); - }; - - 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); - } - }, []); + const {content, backgroundColor, textColor} = announcementBar; + const { + isAnnouncementBarClosed, + closeAnnouncementBar, + } = useAnnouncementBarContext(); - 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 6b4ca286e25b..53dec4a96114 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,26 @@ * 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); + display: flex; + align-items: center; 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 000000000000..1d1adbe88909 --- /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 000000000000..e35dfdd1db2a --- /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 7da6890455af..19ee6b142860 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'; @@ -125,6 +127,8 @@ function DocSidebar(props) { isClient, } = useDocusaurusContext(); const {logoLink, logoLinkProps, logoImageUrl, logoAlt} = useLogo(); + const {isAnnouncementBarClosed} = useAnnouncementBarContext(); + const {scrollY} = useScrollPosition(); const { docsSidebars, @@ -173,6 +177,8 @@ function DocSidebar(props) {