diff --git a/esp/src/src-react/components/Menu.tsx b/esp/src/src-react/components/Menu.tsx index c83371c7ba2..ad77f8c47d3 100644 --- a/esp/src/src-react/components/Menu.tsx +++ b/esp/src/src-react/components/Menu.tsx @@ -6,9 +6,9 @@ import { hasLogAccess } from "src/ESPLog"; import { containerized, bare_metal } from "src/BuildInfo"; import { MainNav, routes } from "../routes"; import { useFavorite, useFavorites, useHistory } from "../hooks/favorite"; -import { useUserTheme } from "../hooks/theme"; import { useSessionStore } from "../hooks/store"; -import { usePivotItemDisable } from "../layouts/pivot"; +import { useUserTheme } from "../hooks/theme"; +import { useMyAccount } from "../hooks/user"; import { Breadcrumbs } from "./Breadcrumbs"; export interface NextPrevious { @@ -226,7 +226,8 @@ export const SubNavigation: React.FunctionComponent = ({ hashPath }) => { - const { theme } = useUserTheme(); + const { theme, themeV9 } = useUserTheme(); + const { isAdmin } = useMyAccount(); const [favorites] = useFavorites(); const [favoriteCount, setFavoriteCount] = React.useState(0); @@ -300,7 +301,12 @@ export const SubNavigation: React.FunctionComponent = ({ setLogsDisabled(true); }); }, []); - const logsDisabledStyle = usePivotItemDisable(logsDisabled); + const linkStyle = React.useCallback((disabled) => { + return disabled ? { + background: themeV9.colorNeutralBackgroundDisabled, + color: themeV9.colorNeutralForegroundDisabled + } : {}; + }, [themeV9]); const favoriteMenu: IContextualMenuItem[] = React.useMemo(() => { const retVal: IContextualMenuItem[] = []; @@ -320,8 +326,9 @@ export const SubNavigation: React.FunctionComponent = ({ {subMenuItems[mainNav]?.map((row, idx) => { + const linkDisabled = (row.itemKey === "/topology/logs" && logsDisabled) || (row.itemKey.indexOf("security") > -1 && !isAdmin); return = ({ row.itemKey === subNav ? navStyles.active : "", !subNav && row.itemKey === "/topology/configuration" ? navStyles.active : "" ].join(" ")} - style={row.itemKey === "/topology/logs" && logsDisabled ? logsDisabledStyle?.style : {}} + style={linkStyle(linkDisabled)} > {row.headerText} ;