Feature Request - Sidebar Nav
jamesdbruner opened this issue · comments
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.
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 system-ui/theme-ui#649 )