Skip to content

Commit ee96afd

Browse files
authored
[Beta] Top bar fixes (#5025)
1 parent de4c6b1 commit ee96afd

File tree

3 files changed

+26
-27
lines changed

3 files changed

+26
-27
lines changed

beta/src/components/Layout/Page.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,10 +37,12 @@ export function Page({children, toc}: PageProps) {
3737
<SocialBanner />
3838
<SidebarContext.Provider value={routeTree}>
3939
<div className="h-auto flex flex-col lg:flex-row">
40-
<div className="sticky top-0 py-0 lg:w-80 flex-none lg:static shadow lg:shadow-none z-50">
40+
<div className="fixed lg:sticky top-0 left-0 right-0 py-0 lg:w-80 flex-none lg:static shadow lg:shadow-none z-50">
4141
<Nav />
4242
</div>
4343

44+
<div className="lg:hidden h-16 mb-2" />
45+
4446
{/* No fallback UI so need to be careful not to suspend directly inside. */}
4547
<React.Suspense fallback={null}>
4648
<div className="flex flex-1 w-full h-full self-stretch min-w-0">

beta/src/components/SocialBanner.tsx

Lines changed: 22 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,37 @@
44
*/
55

66
import React from 'react';
7+
import cn from 'classnames';
78
import {ExternalLink} from './ExternalLink';
89

9-
// TODO: Unify with the old site settings.
1010
const bannerText = 'Support Ukraine 🇺🇦';
1111
const bannerLink = 'https://opensource.fb.com/support-ukraine';
1212
const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine';
1313

14-
// Keep these synced:
15-
const bannerHeightJs = 40;
16-
const bannerHeightTw = 'h-[40px]';
17-
18-
if (typeof window !== 'undefined') {
19-
// Assume it's Next.js scroll restoration.
20-
const realScrollTo = window.scrollTo;
21-
(window as any).scrollTo = function scrollToPatchedForSocialBanner(
22-
x: number,
23-
y: number
24-
) {
25-
if (y === 0) {
26-
// We're trying to reset scroll.
27-
// If we already scrolled past the banner, consider it as y = 0.
28-
y = Math.min(window.scrollY, bannerHeightJs);
29-
}
30-
return realScrollTo(x, y);
31-
};
32-
}
33-
3414
export default function SocialBanner() {
15+
const ref = React.useRef<HTMLDivElement | null>(null);
16+
React.useEffect(() => {
17+
function patchedScrollTo(x: number, y: number) {
18+
if (y === 0) {
19+
// We're trying to reset scroll.
20+
// If we already scrolled past the banner, consider it as y = 0.
21+
const bannerHeight = ref.current!.offsetHeight; // Could be zero (e.g. mobile)
22+
y = Math.min(window.scrollY, bannerHeight);
23+
}
24+
return realScrollTo(x, y);
25+
}
26+
const realScrollTo = window.scrollTo;
27+
(window as any).scrollTo = patchedScrollTo;
28+
return () => {
29+
(window as any).scrollTo = realScrollTo;
30+
};
31+
}, []);
3532
return (
3633
<div
37-
className={
38-
bannerHeightTw +
39-
` w-full bg-gray-100 dark:bg-gray-700 text-base md:text-lg py-2 sm:py-0 flex items-center justify-center flex-col sm:flex-row z-[100]`
40-
}>
34+
ref={ref}
35+
className={cn(
36+
`h-[40px] hidden lg:flex w-full bg-gray-100 dark:bg-gray-700 text-base md:text-lg py-2 sm:py-0 items-center justify-center flex-col sm:flex-row z-[100]`
37+
)}>
4138
<div className="hidden sm:block">{bannerText}</div>
4239
<ExternalLink
4340
className="ml-0 sm:ml-1 text-link dark:text-link-dark hover:underline"

beta/src/styles/index.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -218,7 +218,7 @@ html.dark .code-step * {
218218
}
219219

220220
.mdx-heading {
221-
scroll-margin-top: 3em;
221+
scroll-margin-top: 3.5em;
222222
/* Space for the anchor */
223223
padding-right: 1em;
224224
}

0 commit comments

Comments
 (0)