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 React from 'react';
import { NavModel, GrafanaTheme2 } from '@grafana/data'; 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 { export interface Props {
model: NavModel; 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}`} />} {main.img && <img className={styles.sectionImg} src={main.img} alt={`logo of ${main.text}`} />}
{props.model.main.text} {props.model.main.text}
</h2> </h2>
<div className={styles.items} role="tablist"> <CustomScrollbar>
{directChildren.map((child, index) => { <div className={styles.items} role="tablist">
return ( {directChildren.map((child, index) => {
!child.hideFromTabs && return (
!child.children && ( !child.hideFromTabs &&
<VerticalTab label={child.text} active={child.active} key={`${child.url}-${index}`} href={child.url} /> !child.children && (
) <VerticalTab label={child.text} active={child.active} key={`${child.url}-${index}`} href={child.url} />
); )
})} );
{nestedItems.map((child) => ( })}
<> {nestedItems.map((child) => (
<div className={styles.subSection}>{child.text}</div> <>
{child.children!.map((child, index) => { <div className={styles.subSection}>{child.text}</div>
return ( {child.children!.map((child, index) => {
!child.hideFromTabs && return (
!child.children && ( !child.hideFromTabs &&
<VerticalTab !child.children && (
label={child.text} <VerticalTab
active={child.active} label={child.text}
key={`${child.url}-${index}`} active={child.active}
href={child.url} key={`${child.url}-${index}`}
/> href={child.url}
) />
); )
})} );
</> })}
))} </>
</div> ))}
</div>
</CustomScrollbar>
</nav> </nav>
); );
} }