import * as React from 'react' ; import styles from './SpfxFluentuiNav.module.scss' ; import { ISpfxFluentuiNavProps } from './ISpfxFluentuiNavProps' ; import { ISpfxFluentuiNavState } from './ISpfxFluentuiNavState' ; import { Nav , INavLink , INavStyles , INavLinkGroup } from 'office-ui-fabric-react/lib/Nav' ; import { sp } from "@pnp/sp" ; import "@pnp/sp/webs" ; import "@pnp/sp/lists" ; import "@pnp/sp/items" ; const navStyles = { root : { width : 208 , height : 350 , boxSizing : 'border-box' , border : '1px solid #eee' , overflowY : 'auto' , } , } ; export default class SpfxFluentuiNav extends React . Component < ISpfxFluentuiNavProps , ISpfxFluentuiNavState > { constructor ( props ) { super ( props ) ; sp . setup ( { spfxContext : this . props . context } ) ; this . state = { links : [ ] } ; this . _getLinks ( ) ; } private async _getLinks ( ) { const allItems = await sp . web . lists . getByTitle ( "TreeLinks" ) . items . getAll ( ) ; const linkgroupcol = [ { links : [ ] } ] ; let linkcol = linkgroupcol [ 0 ] . links ; allItems . forEach ( function ( v , i ) { if ( v [ "ParentId" ] == null ) { linkcol . push ( { name : v [ "Title" ] , url : v [ "Link" ] , links : [ ] , key : v . Id + '' , isExpanded : true , target : '_blank' } ) ; } else { const link = { key : v . Id + '' , name : v [ "Title" ] , url : v [ "Link" ] , links : [ ] , target : '_blank' } ; var treecol = linkcol . filter ( function ( value ) { return value . key == v [ "ParentId" ] ; } ) ; if ( treecol . length != 0 ) { treecol [ 0 ] . links . push ( link ) ; } } } ) ; console . log ( linkgroupcol ) ; this . setState ( { links : linkgroupcol } ) ; } public render ( ) { return ( < div className = { styles . spfxFluentuiNav } > < Nav onLinkClick = { this . _onLinkClick } selectedKey = "5" ariaLabel = "Nav basic example" styles = { navStyles } groups = { this . state . links } / > < /div>); } private _onLinkClick ( ev ? , item ? ) { if ( item && item . name === 'SharePoint' ) { console . log ( 'SharePoint link clicked' ) ; } } }