From 87d19ccd3e0e138e69ee782659550c80c22d9c9f Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Thu, 6 Jan 2022 11:09:36 -0500 Subject: [PATCH 1/4] Fix gap on mobile with banner --- docs/nextra-theme-docs/sidebar.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/docs/nextra-theme-docs/sidebar.js b/docs/nextra-theme-docs/sidebar.js index 03b5f73ba95f0..cb8c8c072067b 100644 --- a/docs/nextra-theme-docs/sidebar.js +++ b/docs/nextra-theme-docs/sidebar.js @@ -1,4 +1,4 @@ -import React, { useState, useEffect, useMemo } from "react"; +import React, { useState, useEffect, useMemo, useCallback } from "react"; import cn from "classnames"; import Slugger from "github-slugger"; import { useRouter } from "next/router"; @@ -157,6 +157,17 @@ export default function Sidebar({ .map((child) => child.props.children), [headings] ); + const [hasScrolled, setHasScrolled] = useState(false); + + const onScroll = useCallback(() => { + setHasScrolled(window.pageYOffset > 1); + }, []); + + useEffect(() => { + requestIdleCallback(onScroll); + window.addEventListener("scroll", onScroll); + return () => window.removeEventListener("scroll", onScroll); + }, [onScroll]); const { menu } = useMenuContext(); useEffect(() => { @@ -175,8 +186,8 @@ export default function Sidebar({ mdShow ? "md:block" : "" )} style={{ - top: "4rem", - height: "calc(100vh - 4rem)", + top: hasScrolled ? "4rem" : "6rem", + height: hasScrolled ? "calc(100vh - 4rem)" : "calc(100vh - 6rem)", }} >
From 5bb4b6ab3fbf394981995acab72d0d8d50af9936 Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Thu, 6 Jan 2022 11:28:57 -0500 Subject: [PATCH 2/4] Make isomorphic --- docs/nextra-theme-docs/sidebar.js | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/docs/nextra-theme-docs/sidebar.js b/docs/nextra-theme-docs/sidebar.js index cb8c8c072067b..4e0d09f194bb3 100644 --- a/docs/nextra-theme-docs/sidebar.js +++ b/docs/nextra-theme-docs/sidebar.js @@ -164,9 +164,15 @@ export default function Sidebar({ }, []); useEffect(() => { - requestIdleCallback(onScroll); - window.addEventListener("scroll", onScroll); - return () => window.removeEventListener("scroll", onScroll); + if (typeof window !== "undefined") { + requestIdleCallback(onScroll); + window.addEventListener("scroll", onScroll); + } + return () => { + if (typeof window !== "undefined") { + window.removeEventListener("scroll", onScroll); + } + }; }, [onScroll]); const { menu } = useMenuContext(); From 48f384326e082d42a7d14141d2d8463fe18e7ceb Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Thu, 6 Jan 2022 11:42:00 -0500 Subject: [PATCH 3/4] Fix safari --- docs/pages/_app.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 11e3ee47f77a9..3bf17d6c3658b 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -6,6 +6,14 @@ import Prism from "prism-react-renderer/prism"; (typeof global !== "undefined" ? global : window).Prism = Prism; require("prismjs/components/prism-docker"); +// Some of the NPM packages we included, use following methods without polyfills. +// So, we need to include these polyfills. +// (This is only needed for Safari) +if (typeof window !== "undefined" && !("requestIdleCallback" in window)) { + window.requestIdleCallback = (fn) => setTimeout(fn, 1); + window.cancelIdleCallback = (e) => clearTimeout(e); +} + export default function Nextra({ Component, pageProps }) { return ( <> From 2822c4c8139b1986644ab48f51370d633b48d47a Mon Sep 17 00:00:00 2001 From: Jared Palmer Date: Thu, 6 Jan 2022 11:43:01 -0500 Subject: [PATCH 4/4] Add reqIdleCallback shim for safari --- docs/pages/_app.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/pages/_app.js b/docs/pages/_app.js index 3bf17d6c3658b..d08aae78f349f 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -6,9 +6,7 @@ import Prism from "prism-react-renderer/prism"; (typeof global !== "undefined" ? global : window).Prism = Prism; require("prismjs/components/prism-docker"); -// Some of the NPM packages we included, use following methods without polyfills. -// So, we need to include these polyfills. -// (This is only needed for Safari) +// Shim requestIdleCallback in Safari if (typeof window !== "undefined" && !("requestIdleCallback" in window)) { window.requestIdleCallback = (fn) => setTimeout(fn, 1); window.cancelIdleCallback = (e) => clearTimeout(e);