import { useMemo } from 'react' ; import { useHistory } from 'react-router' ; import useTeleport from 'teleport/useTeleport' ; import useStickyClusterId from 'teleport/useStickyClusterId' ; import * as Icons from 'design/Icon' ; import * as Store from 'teleport/stores/storeNav' ; export default function useSideNav ( ) { const h = useHistory ( ) ; const ctx = useTeleport ( ) ; const { clusterId } = useStickyClusterId ( ) ; const items = useMemo ( ( ) => makeItems ( clusterId , ctx . storeNav . getSideItems ( ) ) , [ clusterId ] ) ; return { items , path : h . location . pathname , } ; } function makeItems ( clusterId , storeItems ) { const items = new Map < string , Item > ( ) ; const itemGroups = getGroups ( ) ; for ( let i = 0 ; i < storeItems . length ; i ++ ) { const cur = storeItems [ i ] ; const groupName = cur . group ; const item = { items : [ ] as Item [ ] , route : cur . getLink ( clusterId ) , exact : cur . exact , title : cur . title , Icon : cur . Icon , } ; if ( itemGroups [ groupName ] ) { itemGroups [ groupName ] . items . push ( item ) ; items . set ( groupName , itemGroups [ groupName ] ) ; } else { items . set ( i + '' , item ) ; } } return Array . from ( items . values ( ) ) ; } function getGroups ( ) { return { team : { Icon : Icons . Users , title : 'Team' , items : [ ] as Item [ ] , route : '' , } , activity : { Icon : Icons . AlarmRing , title : 'Activity' , items : [ ] as Item [ ] , route : '' , } , clusters : { Icon : Icons . Clusters , title : 'Clusters' , items : [ ] as Item [ ] , route : '' , } , } ; } export interface Item { items : Item [ ] ; route : string ; exact ? : boolean ; title : string ; Icon : any ; }