feat(gatsby-theme-docz): sidebar scroll to selected item in menu (#1228)

Author: rakannimer

core/gatsby-theme-docz/src/components/NavGroup/index.js

@@ -7,14 +7,19 @@ import * as styles from './styles'
 import { NavLink } from '../NavLink'
 import { ChevronDown } from '../Icons'
 
-export const NavGroup = ({ item }) => {
-  const current = useCurrentDoc()
+export const NavGroup = ({ item, sidebarRef }) => {
+  const currentDoc = useCurrentDoc()
+  const currentDocRef = React.useRef()
   const { name, menu } = item
   const [subheadingsVisible, setShowsubheadings] = React.useState(
-    current.menu === name
+    currentDoc.menu === name
   )
   const toggleSubheadings = () => setShowsubheadings(!subheadingsVisible)
-
+  React.useEffect(() => {
+    if (sidebarRef.current && currentDocRef.current) {
+      sidebarRef.current.scrollTo(0, currentDocRef.current.offsetTop)
+    }
+  }, [])
   return (
     <div sx={styles.wrapper} data-testid="nav-group">
       <div sx={styles.title} onClick={toggleSubheadings}>
@@ -25,6 +30,13 @@ export const NavGroup = ({ item }) => {
         {menu &&
           subheadingsVisible &&
           menu.map(menu => {
+            if (currentDoc.route === menu.route) {
+              return (
+                <NavLink key={menu.id} item={menu} ref={currentDocRef}>
+                  {menu.name}
+                </NavLink>
+              )
+            }
             return (
               <NavLink key={menu.id} item={menu}>
                 {menu.name}

core/gatsby-theme-docz/src/components/NavLink/index.js

@@ -20,7 +20,7 @@ const getCurrentHash = () => {
   return window.location ? window.location.hash : ''
 }
 
-export const NavLink = ({ item, ...props }) => {
+export const NavLink = React.forwardRef(({ item, ...props }, ref) => {
   const docs = useDocs()
   const to = item.route
   const headings = docs && getHeadings(to, docs)
@@ -30,7 +30,13 @@ export const NavLink = ({ item, ...props }) => {
   const currentHash = getCurrentHash()
   return (
     <React.Fragment>
-      <Link {...props} to={to} sx={styles.link} activeClassName="active" />
+      <Link
+        {...props}
+        to={to}
+        sx={styles.link}
+        activeClassName="active"
+        ref={ref}
+      />
       {showHeadings &&
         headings.map(heading => (
           <Link
@@ -44,4 +50,4 @@ export const NavLink = ({ item, ...props }) => {
         ))}
     </React.Fragment>
   )
-}
+})

core/gatsby-theme-docz/src/components/Sidebar/index.js

@@ -1,8 +1,8 @@
 /** @jsx jsx */
-import React, { useState } from 'react'
+import React, { useState, useRef, useEffect } from 'react'
 import { Global } from '@emotion/core'
 import { jsx, Box } from 'theme-ui'
-import { useMenus } from 'docz'
+import { useMenus, useCurrentDoc } from 'docz'
 
 import * as styles from './styles'
 import { NavSearch } from '../NavSearch'
@@ -12,11 +12,16 @@ import { NavGroup } from '../NavGroup'
 export const Sidebar = React.forwardRef((props, ref) => {
   const [query, setQuery] = useState('')
   const menus = useMenus({ query })
-
+  const currentDoc = useCurrentDoc()
+  const currentDocRef = useRef()
   const handleChange = ev => {
     setQuery(ev.target.value)
   }
-
+  useEffect(() => {
+    if (ref.current && currentDocRef.current) {
+      ref.current.scrollTo(0, currentDocRef.current.offsetTop)
+    }
+  }, [])
   return (
     <>
       <Box onClick={props.onClick} sx={styles.overlay(props)}>
@@ -30,7 +35,15 @@ export const Sidebar = React.forwardRef((props, ref) => {
         />
         {menus &&
           menus.map(menu => {
-            if (!menu.route) return <NavGroup key={menu.id} item={menu} />
+            if (!menu.route)
+              return <NavGroup key={menu.id} item={menu} sidebarRef={ref} />
+            if (menu.route === currentDoc.route) {
+              return (
+                <NavLink key={menu.id} item={menu} ref={currentDocRef}>
+                  {menu.name}
+                </NavLink>
+              )
+            }
             return (
               <NavLink key={menu.id} item={menu}>
                 {menu.name}