From 2b6f183778195457131e05de0f872b6d5565bdb6 Mon Sep 17 00:00:00 2001 From: Josh Heyer Date: Thu, 25 May 2023 05:01:47 +0000 Subject: [PATCH 1/8] Build #4024 into the system as follows: - record number of children when building nav tree - apply CSS class to nav links where childCount > 0 - CSS class renders arrow using Bootstrap's weird-ass border technique Result: arrows next to expandable items in list. TODO: figure out if accessibility can be improved here (ARIA role?) --- src/components/tree-node.js | 3 ++- src/constants/gatsby-utils.js | 1 + src/styles/_docs.scss | 9 +++++++++ 3 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/tree-node.js b/src/components/tree-node.js index 3c5b201e164..8243d04f3f3 100644 --- a/src/components/tree-node.js +++ b/src/components/tree-node.js @@ -38,7 +38,8 @@ const TreeNode = ({ node, path, hideIfEmpty }) => {
diff --git a/src/constants/gatsby-utils.js b/src/constants/gatsby-utils.js index e1a8efe23bc..071f4425092 100644 --- a/src/constants/gatsby-utils.js +++ b/src/constants/gatsby-utils.js @@ -156,6 +156,7 @@ const treeNodeToNavNode = (treeNode, withItems = false) => { iconName: frontmatter?.iconName, description: frontmatter?.description, interactive: interactive, + childCount: treeNode.children.length, }; if (withItems) navNode.items = []; return navNode; diff --git a/src/styles/_docs.scss b/src/styles/_docs.scss index 3abe4f18798..6b07d01a5d6 100644 --- a/src/styles/_docs.scss +++ b/src/styles/_docs.scss @@ -66,6 +66,15 @@ label.link-label { } } +/* sidebar item that contains other items */ +.section-title +{ + @include caret(right); + &::after { + vertical-align: 0; + } +} + .font-weight-400 { font-weight: 400; } From 9999ce9671e824628db4df11292e3f5c97594da4 Mon Sep 17 00:00:00 2001 From: Josh Heyer Date: Thu, 25 May 2023 05:10:18 +0000 Subject: [PATCH 2/8] Partially address #4120 as follows: - fix height of right nav bar, enable scrollbar when content exceeds - indicate currently-selected section via CSS class - on navigation, ensure currently selected items in both left and right nav are scrolled into view if not currently visible - using gatsby hook, record current scroll state for left/right navs, restore this state when navigating back --- gatsby-browser.js | 7 +++++ src/components/side-navigation.js | 5 +++- src/components/table-of-contents.js | 45 +++++++++++++++++++---------- src/styles/_overrides.scss | 5 ++++ 4 files changed, 45 insertions(+), 17 deletions(-) diff --git a/gatsby-browser.js b/gatsby-browser.js index 7651e54fe5d..ab2291b9008 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -10,6 +10,13 @@ exports.onRouteUpdate = ({ location }) => scrollToAnchor(location); * @param {Number} [mainNavHeight] - the height of any persistent nav -> document.querySelector(`nav`) */ function scrollToAnchor(location, mainNavHeight = 0) { + // left nav: scroll + const navItem = document.querySelector(".sidebar .active"); + if (navItem) navItem.scrollIntoView({ block: "nearest" }); + // right-nav: scroll + const toc = document.querySelector(".toc-sticky .active"); + if (toc) toc.scrollIntoView({ block: "nearest" }); + // Check for location so build does not fail if (location && location.hash) { try { diff --git a/src/components/side-navigation.js b/src/components/side-navigation.js index fc4ac7c0752..c4cb6224523 100644 --- a/src/components/side-navigation.js +++ b/src/components/side-navigation.js @@ -1,4 +1,5 @@ import React from "react"; +import { useScrollRestoration } from "gatsby"; import { DarkModeToggle, Link, Logo } from "./"; const DocsLink = () => ( @@ -52,9 +53,11 @@ const SideNavigation = ({ footer = true, hideKBLink = false, }) => { + const scrollRestoration = useScrollRestoration("navigation-sidebar"); + return (