Feature Request - Sidebar Nav

[jamesdbruner]

This is more of a feature request than anything but if when you've navigated to a submenu item, the sub nav that you're currently in should remain open on page load.

[ethanjli]

I think I've found a rough solution, by comparing against https://github.com/system-ui/theme-ui/blob/develop/packages/docs/src/components/layout.js . Essentially, subnav accordions will open if you provide a valid path to the Sidenav component's pathname property. The path should be nested such that the top-level menu item's path is a prefix of the submenu item's path. For example, the following structure of sidebar.mdx would work:

- [Hello](/hello)
  - [World](/hello/world)
- [Foo](/foo)
  - [Bar](/foo/bar)

One way to get location for location.pathname is to use the useLocation hook from @reach/router. With this approach, layout.js would look like:

import { useLocation } from @reach/router'

[...]

export default ({ children }) => {
  [...]
  const location = useLocation();

  return (
    [...]
          <Sidenav
            [...]
            pathname={location.pathname}
          />
  )
}

Note: I've only tested this against @theme-ui/sidenav version 0.7.5, which is not the version specified by gatsby-theme-documentation.

(This is also relevant to https://github.com/system-ui/theme-ui/issues/649 )