import * as React from 'react' ; import { Box , Link , Input , Stack , SideNav as _SideNav , usePage , applyTheme } from 'bumbag' ; import NextLink from 'next/link' ; import _startCase from 'lodash/startCase' ; import _uniqBy from 'lodash/uniqBy' ; const SearchInput = applyTheme ( Input , { defaultProps : { color : 'text' , inputProps : { backgroundColor : 'white700' , borderColor : 'white700' , _focus : { borderColor : 'primary200' , } , } , size : 'small' , } , modes : { dark : { defaultProps : { inputProps : { backgroundColor : 'gray900' , borderColor : 'gray900' , _focus : { borderColor : 'primary' , } , } , } , } , } , } ) ; const SideNav = applyTheme ( _SideNav , { Level : { Title : { styles : { base : { paddingLeft : 'minor-5' , fontSize : '150' , fontWeight : '700' , color : 'text' , textTransform : 'unset' , } , } , } , } , Item : { styles : { base : { paddingLeft : 'minor-5' , fontSize : '150' , fontWeight : '500' , minHeight : '2.25em' , height : '2.25em' , textTransform : 'unset' , } , } , } , } ) ; export default function Sidebar ( props ) { const { items , orders , path } = props ; const { sidebar } = usePage ( ) ; const [ searchText , setSearchText ] = React . useState ( '' ) ; return ( < Stack spacing = "major-1" paddingY = "major-2" { ... props } > < SideNav selectedId = { path } > < SearchInput before = { < Input . Icon color = "gray200" icon = "solid-search" / > } onChange = { ( e ) => setSearchText ( e . target . value ) } value = { searchText } placeholder = "Search..." marginX = "major-2" marginBottom = "major-2" / > { orders . map ( ( orderItem ) => { return ( < SideNavItem key = { Object . keys ( orderItem ) [ 0 ] } orderItem = { orderItem } searchText = { searchText } sidebar = { sidebar } sidebarItems = { items } / > ) ; } ) } < /SideNav> < /Stack>); } function SideNavItem ( { orderItem , searchText , sidebarItems , sidebar } ) { const sideNavItemRef = React . useRef ( ) ; const [ show , setShow ] = React . useState ( true ) ; const key = Object . keys ( orderItem ) [ 0 ] ; const itemOrders = orderItem [ key ] ; let items = sidebarItems [ key ] || sidebarItems || [ ] ; if ( itemOrders . length > 0 ) { items = _uniqBy ( [ ... itemOrders . map ( ( itemOrder ) => ( items || [ ] ) . find ( ( item ) => itemOrder === item . name ) ) , ... items ] , 'name' ) ; } React . useEffect ( ( ) => { if ( sideNavItemRef . current && ! sideNavItemRef . current . querySelector ( 'li' ) ) { setShow ( false ) ; } else { setShow ( true ) ; } } , [ searchText ] ) ; return ( < Box ref = { sideNavItemRef } > < SideNav . Level title = { _startCase ( key ) } display = { ! show ? 'none' : undefined } > { ( items || [ ] ) . filter ( Boolean ) . map ( ( item ) => { const frontmatter = item . mdx ?. frontmatter || { } ; const title = frontmatter . title || _startCase ( item . name ) . replace ( /\s/g , '' ) ; if ( ! searchText || title . toLowerCase ( ) . includes ( searchText . toLowerCase ( ) ) ) { return ( < NextLink href = { `${ `/docs${ item . path }/` }${ typeof window !== 'undefined' ? window . location . search : '' }` } passHref > < Link textDecoration = "none" > < SideNav . Item key = { item . name } color = { frontmatter . wip ? 'gray' : '' } onClick = { ( ) => setTimeout ( sidebar . drawer . hide , 100 ) } navId = { `/docs${ item . path }/` } > { title } { frontmatter . wip ? '🚧' : '' } < /SideNav.Item> < /Link> < /NextLink>); } return null ; } ) } < /SideNav.Level> < /Box>); }