IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Navigation: Correctly highlight a SectionNavItem if it has children that are active (#76860)

Browse Source 
correctly highlight a sectionnavitem if it has children that are active
This commit is contained in:
Ashley Harrison 2023-10-20 10:27:25 +01:00 committed by GitHub
parent a0476741f2
commit f5758e9f4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 4 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/core/components/AppChrome/SectionNav/SectionNavItem.tsx
View File

@ -6,6 +6,8 @@ import { selectors } from '@grafana/e2e-selectors';
import { reportInteraction } from '@grafana/runtime';
import { useStyles2, Icon } from '@grafana/ui';
import { getActiveItem, hasChildMatch } from '../MegaMenu/utils';
export interface Props {
item: NavModelItem;
isSectionRoot?: boolean;
@ -19,13 +21,14 @@ export function SectionNavItem({ item, isSectionRoot = false, level = 0 }: Props
const styles = useStyles2(getStyles);
const children = item.children?.filter((x) => !x.hideFromTabs);
const activeItem = item.children && getActiveItem(item.children, location.pathname);
// If first root child is a section skip the bottom margin (as sections have top margin already)
const noRootMargin = isSectionRoot && Boolean(item.children![0].children?.length);
const linkClass = cx({
[styles.link]: true,
[styles.activeStyle]: item.active,
[styles.activeStyle]: item.active || (level === MAX_DEPTH && hasChildMatch(item, activeItem)),
[styles.isSection]: level < MAX_DEPTH && (Boolean(children?.length) || item.isSection),
[styles.isSectionRoot]: isSectionRoot,
[styles.noRootMargin]: noRootMargin,