Navigation: Minor tweak to dockedMegaMenu to make it slightly tighter (#77493)

minor tweak to dockedMegaMenu to make it slightly tighter
This commit is contained in:
Ashley Harrison 2023-11-01 11:56:58 +00:00 committed by GitHub
parent f1e42fefb4
commit 2d5e602b2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 5 deletions

View File

@ -63,7 +63,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
<li ref={item} className={styles.listItem}>
<div
className={cx(styles.menuItem, {
[styles.hasIcon]: Boolean(level === 0 && link.icon),
[styles.menuItemWithIcon]: Boolean(level === 0 && link.icon),
})}
>
{level !== 0 && <Indent level={level === MAX_DEPTH ? level - 1 : level} spacing={3} />}
@ -93,6 +93,7 @@ export function MegaMenuItem({ link, activeItem, level = 0, onClick }: Props) {
<div
className={cx(styles.labelWrapper, {
[styles.hasActiveChild]: hasActiveChild,
[styles.labelWrapperWithIcon]: Boolean(level === 0 && link.icon),
})}
>
{level === 0 && link.icon && (
@ -141,9 +142,12 @@ const getStyles = (theme: GrafanaTheme2) => ({
alignItems: 'center',
gap: theme.spacing(1),
height: theme.spacing(4),
paddingLeft: theme.spacing(1),
paddingLeft: theme.spacing(0.5),
position: 'relative',
}),
menuItemWithIcon: css({
paddingLeft: theme.spacing(0),
}),
collapseButtonWrapper: css({
display: 'flex',
justifyContent: 'center',
@ -178,9 +182,10 @@ const getStyles = (theme: GrafanaTheme2) => ({
alignItems: 'center',
gap: theme.spacing(2),
minWidth: 0,
paddingLeft: theme.spacing(1),
}),
hasIcon: css({
paddingLeft: theme.spacing(0),
labelWrapperWithIcon: css({
paddingLeft: theme.spacing(0.5),
}),
hasActiveChild: css({
color: theme.colors.text.primary,

View File

@ -88,7 +88,6 @@ const getStyles = (theme: GrafanaTheme2, isActive: Props['isActive']) => ({
display: 'flex',
gap: '0.5rem',
height: '100%',
paddingLeft: theme.spacing(1),
width: '100%',
}),
});