import { withPrefix } from "gatsby" ; import React from "react" ; import { useLocation } from "@reach/router" ; import SmartLink from "./smartLink" ; type Props = { to : string ; title ? : string ; children ? : React . ReactNode ; className ? : string ; collapsed ? : boolean | null ; } ; export default ( { to , title , children , collapsed = null , className = "" , } ) : JSX . Element => { const location = useLocation ( ) ; const isActive = location && location . pathname . indexOf ( withPrefix ( to ) ) === 0 ; const showSubtree = isActive || collapsed === false ; className += "toc-item" ; return ( < li className = { className } data - sidebar - branch > < SmartLink to = { to } className = "d-block" data - sidebar - link > { title || children } < /SmartLink> { title && children && ( < ul className = "list-unstyled" data - sidebar - tree > { showSubtree && children } < /ul>)} < /li>); } ;