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

Add scrolling to SectionNav (#54698)

Browse Source
This commit is contained in:
Ashley Harrison 2022-09-05 12:39:54 +01:00 committed by GitHub
parent aee13563ce
commit a423c7f22e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
public/app/core/components/PageNew/SectionNav.tsx
View File

@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import React from 'react';
import { NavModel, GrafanaTheme2 } from '@grafana/data';
import { useStyles2, Icon, VerticalTab, toIconName } from '@grafana/ui';
import { useStyles2, Icon, VerticalTab, toIconName, CustomScrollbar } from '@grafana/ui';
export interface Props {
model: NavModel;
@ -23,34 +23,36 @@ export function SectionNav(props: Props) {
{main.img && <img className={styles.sectionImg} src={main.img} alt={`logo of ${main.text}`} />}
{props.model.main.text}
</h2>
<div className={styles.items} role="tablist">
{directChildren.map((child, index) => {
return (
!child.hideFromTabs &&
!child.children && (
<VerticalTab label={child.text} active={child.active} key={`${child.url}-${index}`} href={child.url} />
)
);
})}
{nestedItems.map((child) => (
<>
<div className={styles.subSection}>{child.text}</div>
{child.children!.map((child, index) => {
return (
!child.hideFromTabs &&
!child.children && (
<VerticalTab
label={child.text}
active={child.active}
key={`${child.url}-${index}`}
href={child.url}
/>
)
);
})}
</>
))}
</div>
<CustomScrollbar>
<div className={styles.items} role="tablist">
{directChildren.map((child, index) => {
return (
!child.hideFromTabs &&
!child.children && (
<VerticalTab label={child.text} active={child.active} key={`${child.url}-${index}`} href={child.url} />
)
);
})}
{nestedItems.map((child) => (
<>
<div className={styles.subSection}>{child.text}</div>
{child.children!.map((child, index) => {
return (
!child.hideFromTabs &&
!child.children && (
<VerticalTab
label={child.text}
active={child.active}
key={`${child.url}-${index}`}
href={child.url}
/>
)
);
})}
</>
))}
</div>
</CustomScrollbar>
</nav>
);
}