import { IHeadingNode , IPageNode , isPageNode } from "@documentalist/client" ; import classNames from "classnames" ; import * as React from "react" ; import { Classes , Props } from "@blueprintjs/core" ; import { NavMenuItemProps , NavMenuItem } from "./navMenuItem" ; export interface INavMenuProps extends Props { activePageId : string ; activeSectionId : string ; level : number ; onItemClick : ( reference : string ) => void ; items : Array < IPageNode | IHeadingNode > ; renderNavMenuItem ? : ( props : NavMenuItemProps ) => JSX . Element ; } export const NavMenu = props => { const { renderNavMenuItem = NavMenuItem } = props ; const menu = props . items . map ( section => { const isActive = props . activeSectionId === section . route ; const isExpanded = isActive || isParentOfRoute ( section . route , props . activeSectionId ) ; const itemClasses = classNames ( `depth-${ section . level - props . level - 1 }` , { "docs-nav-expanded" : isExpanded , [ Classes . ACTIVE ] : isActive , } ) ; const item = renderNavMenuItem ( { className : itemClasses , href : "#" + section . route , isActive , isExpanded , onClick : ( ) => props . onItemClick ( section . route ) , section , } ) ; return ( < li key = { section . route } > { item } { isPageNode ( section ) ? < NavMenu { ... props } level = { section . level } items = { section . children } / > : null } < /li>); } ) ; const classes = classNames ( "docs-nav-menu" , Classes . LIST_UNSTYLED , props . className ) ; return < ul className = { classes } > { menu } < /ul>; } ; NavMenu . displayName = "Docs2.NavMenu" ; function isParentOfRoute ( parent , route ) { return route . indexOf ( parent + "/" ) === 0 || route . indexOf ( parent + "." ) === 0 ; }