diff --git a/packages/grafana-data/src/types/icon.ts b/packages/grafana-data/src/types/icon.ts
index 74f9c258a33..0cf35d13ccd 100644
--- a/packages/grafana-data/src/types/icon.ts
+++ b/packages/grafana-data/src/types/icon.ts
@@ -20,6 +20,7 @@ export const availableIconsIndex = {
'arrow-left': true,
'arrow-random': true,
'arrow-right': true,
+ 'arrow-to-right': true,
'arrow-up': true,
'arrows-h': true,
'arrows-v': true,
diff --git a/public/app/core/components/PageNew/SectionNav.tsx b/public/app/core/components/PageNew/SectionNav.tsx
index d44fd9171ec..f2777bb029d 100644
--- a/public/app/core/components/PageNew/SectionNav.tsx
+++ b/public/app/core/components/PageNew/SectionNav.tsx
@@ -21,7 +21,7 @@ export function SectionNav({ model }: Props) {
}
return (
- <>
+
-
- >
+
+
);
}
@@ -65,6 +71,14 @@ function useSectionNavState() {
const getStyles = (theme: GrafanaTheme2) => {
return {
+ navContainer: css({
+ display: 'flex',
+ flexDirection: 'column',
+
+ [theme.breakpoints.up('md')]: {
+ flexDirection: 'row',
+ },
+ }),
nav: css({
display: 'flex',
flexDirection: 'column',
@@ -96,16 +110,28 @@ const getStyles = (theme: GrafanaTheme2) => {
},
}),
collapseIcon: css({
- border: `1px solid ${theme.colors.border.weak}`,
- left: '50%',
- transform: 'translate(-50%, 50%) rotate(90deg)',
+ alignSelf: 'center',
+ margin: theme.spacing(1, 0),
+ position: 'relative',
top: theme.spacing(0),
+ transform: 'rotate(90deg)',
+ transition: theme.transitions.create('opacity'),
[theme.breakpoints.up('md')]: {
- transform: 'translateX(50%)',
- top: theme.spacing(8),
- left: theme.spacing(1),
- right: theme.spacing(-1),
+ alignSelf: 'flex-start',
+ left: 0,
+ margin: theme.spacing(0, 0, 0, 1),
+ top: theme.spacing(2),
+ transform: 'none',
+ },
+
+ 'div:hover > &, &:focus': {
+ opacity: 1,
+ },
+ }),
+ collapseIconExpanded: css({
+ [theme.breakpoints.up('md')]: {
+ opacity: 0,
},
}),
};
diff --git a/public/app/core/components/PageNew/SectionNavToggle.tsx b/public/app/core/components/PageNew/SectionNavToggle.tsx
index 1e859335129..e220cf9ad01 100644
--- a/public/app/core/components/PageNew/SectionNavToggle.tsx
+++ b/public/app/core/components/PageNew/SectionNavToggle.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames';
import React from 'react';
import { GrafanaTheme2 } from '@grafana/data';
-import { IconButton, useTheme2 } from '@grafana/ui';
+import { Button, useTheme2 } from '@grafana/ui';
export interface Props {
className?: string;
@@ -16,12 +16,16 @@ export const SectionNavToggle = ({ className, isExpanded, onClick }: Props) => {
const styles = getStyles(theme);
return (
-
);
@@ -31,10 +35,11 @@ SectionNavToggle.displayName = 'SectionNavToggle';
const getStyles = (theme: GrafanaTheme2) => ({
icon: css({
- backgroundColor: theme.colors.background.secondary,
- border: `1px solid ${theme.colors.border.weak}`,
- borderRadius: '50%',
+ color: theme.colors.text.secondary,
marginRight: 0,
zIndex: 1,
}),
+ iconExpanded: css({
+ rotate: '180deg',
+ }),
});