From d86ef96f1ee5331d167b90725e848e70153afe90 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Thu, 5 Sep 2024 21:48:06 +0100 Subject: [PATCH 1/4] fix: allow full-width TOC when sidebar is useable --- packages/providers/src/ui.tsx | 10 +++++-- .../components/Navigation/PrimarySidebar.tsx | 8 +++++- themes/book/app/routes/$.tsx | 27 +++++++++++++++++-- 3 files changed, 40 insertions(+), 5 deletions(-) diff --git a/packages/providers/src/ui.tsx b/packages/providers/src/ui.tsx index 31c50b9e8..238e4152a 100644 --- a/packages/providers/src/ui.tsx +++ b/packages/providers/src/ui.tsx @@ -3,11 +3,12 @@ import { useMediaQuery } from './hooks.js'; type UiState = { isNavOpen?: boolean; + isWide?: boolean; }; type UiContextType = [UiState, (state: UiState) => void]; -const UiContext = createContext(undefined); +export const UiContext = createContext(undefined); // Create a provider for components to consume and subscribe to changes export function UiStateProvider({ children }: { children: React.ReactNode }) { @@ -15,7 +16,7 @@ export function UiStateProvider({ children }: { children: React.ReactNode }) { const wide = useMediaQuery('(min-width: 1280px)'); const [state, setState] = useState({ isNavOpen: false }); useEffect(() => { - if (wide) setState({ ...state, isNavOpen: false }); + if (wide) setState({ ...state, isNavOpen: false, isWide: wide }); }, [wide]); return {children}; } @@ -28,3 +29,8 @@ export function useNavOpen(): [boolean, (open: boolean) => void] { }; return [state?.isNavOpen ?? false, setOpen]; } + +export function isWide(): boolean { + const [state, _] = useContext(UiContext) ?? []; + return state?.isWide ?? false; +} diff --git a/packages/site/src/components/Navigation/PrimarySidebar.tsx b/packages/site/src/components/Navigation/PrimarySidebar.tsx index af1287a85..6ebc9a7a0 100644 --- a/packages/site/src/components/Navigation/PrimarySidebar.tsx +++ b/packages/site/src/components/Navigation/PrimarySidebar.tsx @@ -6,6 +6,7 @@ import { useSiteManifest, useGridSystemProvider, useThemeTop, + isWide, } from '@myst-theme/providers'; import type { Heading } from '@myst-theme/common'; import { Toc } from './TableOfContentsItems.js'; @@ -95,10 +96,15 @@ export function useSidebarHeight(top = 0, i const container = useRef(null); const toc = useRef(null); const transitionState = useNavigation().state; + const wide = isWide(); const setHeight = () => { if (!container.current || !toc.current) return; const height = container.current.offsetHeight - window.scrollY; const div = toc.current.firstChild as HTMLDivElement; + if (div) + div.style.height = wide + ? `min(calc(100vh - ${top}px), ${height + inset}px)` + : `calc(100vh - ${top}px)`; if (div) div.style.height = `min(calc(100vh - ${top}px), ${height + inset}px)`; const nav = toc.current.querySelector('nav'); if (nav) nav.style.opacity = height > 150 ? '1' : '0'; @@ -111,7 +117,7 @@ export function useSidebarHeight(top = 0, i return () => { window.removeEventListener('scroll', handleScroll); }; - }, [container, toc, transitionState]); + }, [container, toc, transitionState, wide]); return { container, toc }; } diff --git a/themes/book/app/routes/$.tsx b/themes/book/app/routes/$.tsx index 917615563..adab7dfa8 100644 --- a/themes/book/app/routes/$.tsx +++ b/themes/book/app/routes/$.tsx @@ -73,7 +73,7 @@ export const loader: LoaderFunction = async ({ params, request }) => { return json({ config, page, project }); }; -export function ArticlePageAndNavigation({ +function ArticlePageAndNavigationInternal({ children, hide_toc, projectSlug, @@ -87,7 +87,7 @@ export function ArticlePageAndNavigation({ const top = useThemeTop(); const { container, toc } = useSidebarHeight(top, inset); return ( - + <> + + ); +} + +export function ArticlePageAndNavigation({ + children, + hide_toc, + projectSlug, + inset = 20, // begin text 20px from the top (aligned with menu) +}: { + hide_toc?: boolean; + projectSlug?: string; + children: React.ReactNode; + inset?: number; +}) { + return ( + + ); } From bdca04b0154536e7f3ab02828c709afcda7ea7e3 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Thu, 5 Sep 2024 21:48:06 +0100 Subject: [PATCH 2/4] fix: rename isWide to useIsWide --- packages/providers/src/ui.tsx | 2 +- packages/site/src/components/Navigation/PrimarySidebar.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/providers/src/ui.tsx b/packages/providers/src/ui.tsx index 238e4152a..90ca53689 100644 --- a/packages/providers/src/ui.tsx +++ b/packages/providers/src/ui.tsx @@ -30,7 +30,7 @@ export function useNavOpen(): [boolean, (open: boolean) => void] { return [state?.isNavOpen ?? false, setOpen]; } -export function isWide(): boolean { +export function useIsWide(): boolean { const [state, _] = useContext(UiContext) ?? []; return state?.isWide ?? false; } diff --git a/packages/site/src/components/Navigation/PrimarySidebar.tsx b/packages/site/src/components/Navigation/PrimarySidebar.tsx index 6ebc9a7a0..396ca8723 100644 --- a/packages/site/src/components/Navigation/PrimarySidebar.tsx +++ b/packages/site/src/components/Navigation/PrimarySidebar.tsx @@ -6,7 +6,7 @@ import { useSiteManifest, useGridSystemProvider, useThemeTop, - isWide, + useIsWide, } from '@myst-theme/providers'; import type { Heading } from '@myst-theme/common'; import { Toc } from './TableOfContentsItems.js'; @@ -96,7 +96,7 @@ export function useSidebarHeight(top = 0, i const container = useRef(null); const toc = useRef(null); const transitionState = useNavigation().state; - const wide = isWide(); + const wide = useIsWide(); const setHeight = () => { if (!container.current || !toc.current) return; const height = container.current.offsetHeight - window.scrollY; From b4f07261bfd4c20e09a81ba963899321204dd74b Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Thu, 5 Sep 2024 21:48:06 +0100 Subject: [PATCH 3/4] chore: add changeset --- .changeset/cyan-taxis-help.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/cyan-taxis-help.md diff --git a/.changeset/cyan-taxis-help.md b/.changeset/cyan-taxis-help.md new file mode 100644 index 000000000..1997eb949 --- /dev/null +++ b/.changeset/cyan-taxis-help.md @@ -0,0 +1,7 @@ +--- +'@myst-theme/providers': patch +'@myst-theme/site': patch +'@myst-theme/book': patch +--- + +Grow TOC on narrow screens From d7adea685ba25edcfe061366af596749a05c4699 Mon Sep 17 00:00:00 2001 From: Angus Hollands Date: Thu, 5 Sep 2024 21:48:06 +0100 Subject: [PATCH 4/4] refactor: unpack single item --- packages/providers/src/ui.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/providers/src/ui.tsx b/packages/providers/src/ui.tsx index 90ca53689..2e9e811b9 100644 --- a/packages/providers/src/ui.tsx +++ b/packages/providers/src/ui.tsx @@ -31,6 +31,6 @@ export function useNavOpen(): [boolean, (open: boolean) => void] { } export function useIsWide(): boolean { - const [state, _] = useContext(UiContext) ?? []; + const [state] = useContext(UiContext) ?? []; return state?.isWide ?? false; }