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: Limit SectionNav to rendering items up to 3 levels (#76478)

Browse Source 
* only render section nav items up to 3 levels

* extract level depth into constant, apply in DockedMegaMenu as well
This commit is contained in:
Ashley Harrison 2023-10-13 10:38:35 +01:00 committed by GitHub
parent 09a4fcd0fe
commit b6fb1e52f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/core/components/AppChrome/DockedMegaMenu/MegaMenuItem.tsx
View File

@ -19,6 +19,9 @@ interface Props {
level?: number; level?: number;
} }
// max level depth to render
const MAX_DEPTH = 2;
export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) { export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const FeatureHighlightWrapper = link.highlightText ? FeatureHighlight : React.Fragment; const FeatureHighlightWrapper = link.highlightText ? FeatureHighlight : React.Fragment;
@ -26,7 +29,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
const hasActiveChild = hasChildMatch(link, activeItem); const hasActiveChild = hasChildMatch(link, activeItem);
const [sectionExpanded, setSectionExpanded] = const [sectionExpanded, setSectionExpanded] =
useLocalStorage(`grafana.navigation.expanded[${link.text}]`, false) ?? Boolean(hasActiveChild); useLocalStorage(`grafana.navigation.expanded[${link.text}]`, false) ?? Boolean(hasActiveChild);
const showExpandButton = linkHasChildren(link) || link.emptyMessage; const showExpandButton = level < MAX_DEPTH && (linkHasChildren(link) || link.emptyMessage);
return ( return (
<li className={styles.listItem}> <li className={styles.listItem}>

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

@ -9,9 +9,13 @@ import { useStyles2, Icon } from '@grafana/ui';
export interface Props { export interface Props {
item: NavModelItem; item: NavModelItem;
isSectionRoot?: boolean; isSectionRoot?: boolean;
level?: number;
} }
export function SectionNavItem({ item, isSectionRoot = false }: Props) { // max level depth to render
const MAX_DEPTH = 2;
export function SectionNavItem({ item, isSectionRoot = false, level = 0 }: Props) {
const styles = useStyles2(getStyles); const styles = useStyles2(getStyles);
const children = item.children?.filter((x) => !x.hideFromTabs); const children = item.children?.filter((x) => !x.hideFromTabs);
@ -22,7 +26,7 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
const linkClass = cx({ const linkClass = cx({
[styles.link]: true, [styles.link]: true,
[styles.activeStyle]: item.active, [styles.activeStyle]: item.active,
[styles.isSection]: Boolean(children?.length) || item.isSection, [styles.isSection]: level < MAX_DEPTH && (Boolean(children?.length) || item.isSection),
[styles.isSectionRoot]: isSectionRoot, [styles.isSectionRoot]: isSectionRoot,
[styles.noRootMargin]: noRootMargin, [styles.noRootMargin]: noRootMargin,
}); });
@ -56,7 +60,8 @@ export function SectionNavItem({ item, isSectionRoot = false }: Props) {
{item.text} {item.text}
{item.tabSuffix && <item.tabSuffix className={styles.suffix} />} {item.tabSuffix && <item.tabSuffix className={styles.suffix} />}
</a> </a>
{children?.map((child, index) => <SectionNavItem item={child} key={index} />)} {level < MAX_DEPTH &&
children?.map((child, index) => <SectionNavItem item={child} key={index} level={level + 1} />)}
</> </>
); );
} }