Hello , I have created custom component using SPFX extension to create top navigation in SharePoint online using term store manage metadata. But I am facing one problem , these menus are not showing on mouse hover , I have to click manually on each menu and see. Could you please help me!!
Below is my code from Navigation.tsx file.
import * as React from 'react';
import { IGlobalNavProps } from "./IGlobalNavProps";
import { IGobalNavState } from "./IGlobalNavState";
import { sp } from "@pnp/sp";
import "@pnp/sp/taxonomy";
import { dateAdd, PnPClientStorage } from "@pnp/common";
//import { AuthUrlException, sp, Web } from 'sp-pnp-js';
const myKey: string = "navigationElements";
import { ContextualMenuItemType, IButtonStyles } from '@fluentui/react'; import { createTheme, ITheme } from 'office-ui-fabric-react/lib/Styling'; import { CommandBar, ICommandBarStyleProps } from "@fluentui/react/lib/CommandBar"; const theme: ITheme = createTheme({
semanticColors: {
bodyBackground: "#000028",
bodyText: "#fff"
}
});
const CommandBarProps: ICommandBarStyleProps = {
theme: theme
};
const buttonStyle: IButtonStyles = {
root: {
backgroundColor: "#000028",
color: "#fff"
},
menuIcon: {
color: "#00ff00",
}
};
export default class GlobalNav extends React.Component<IGlobalNavProps, IGobalNavState> {
private store = new PnPClientStorage();
constructor(props: IGlobalNavProps) {
super(props);
this.state = {
loading: false,
terms: []
}
}
public componentDidMount() {
this.setState({}, async () => {
// let web = new Web(this.props.siteurl);
// this portion is responsible for getting terms from term store
const cachedTermInfo = await this.store.local.getOrPut(myKey, () => {
// return sp.termStore.groups.getById(this.props.termGroupId).sets.getById(this.props.termSetId).getAllChildrenAsOrderedTree({ retrieveProperties: true });
}, dateAdd(new Date(), "minute", 10));
if (cachedTermInfo.length > 0) {
console.log(cachedTermInfo);
this.setState({ terms: cachedTermInfo });
}
});
}
public render(): React.ReactElement {
var commandBarItems: any[] = [];
if (this.state.terms.length > 0) {
commandBarItems = this.state.terms.map((i) => {
return (this.menuItems(i, ContextualMenuItemType.Header));
});
}
return (
<><div> </div>
{
this.state.terms.length > 0 &&
<div>
<CommandBar {...CommandBarProps}
style={{ padding: "12px",width: "100%" }}
items={commandBarItems}
/>
</div>
}
</>
);
}
private menuItems(menuItem: any, itemType: ContextualMenuItemType) {
return ({
key: menuItem.id,
name: menuItem.defaultLabel,
itemType: itemType,
href: menuItem.children.length == 0 ?
((menuItem.localProperties != undefined && menuItem.localProperties[0].properties !== undefined && menuItem.localProperties[0].properties.length > 0) ?
menuItem.localProperties[0].properties.filter((x: { key: string; }) => x.key == "_Sys_Nav_SimpleLinkUrl")[0].value !== undefined ? menuItem.localProperties[0].properties.filter((x: { key: string; }) => x.key == "_Sys_Nav_SimpleLinkUrl")[0].value : null
: null)
: null,
subMenuProps: menuItem.children.length > 0 ?
{ items: menuItem.children.map((i: any) => { return (this.menuItems(i, ContextualMenuItemType.Normal)); }) }
: null,
isSubMenu: itemType != ContextualMenuItemType.Header,
buttonStyles: buttonStyle
});
}
}
Thank You So much in advance !!
