hide sectionnav items when collapsed, ensure focus ring overlays active items (#58250)

This commit is contained in:
Ashley Harrison
2022-11-04 16:42:34 +00:00
committed by GitHub
parent 22628d1f7e
commit ca3bcc691c
2 changed files with 3 additions and 0 deletions
@@ -72,6 +72,7 @@ const getStyles = (theme: GrafanaTheme2) => {
flexShrink: 0, flexShrink: 0,
transition: theme.transitions.create(['width', 'max-height']), transition: theme.transitions.create(['width', 'max-height']),
maxHeight: 0, maxHeight: 0,
visibility: 'hidden',
[theme.breakpoints.up('md')]: { [theme.breakpoints.up('md')]: {
width: 0, width: 0,
maxHeight: 'unset', maxHeight: 'unset',
@@ -79,6 +80,7 @@ const getStyles = (theme: GrafanaTheme2) => {
}), }),
navExpanded: css({ navExpanded: css({
maxHeight: '50vh', maxHeight: '50vh',
visibility: 'visible',
[theme.breakpoints.up('md')]: { [theme.breakpoints.up('md')]: {
width: '250px', width: '250px',
maxHeight: 'unset', maxHeight: 'unset',
@@ -66,6 +66,7 @@ const getStyles = (theme: GrafanaTheme2) => {
&:hover, &:hover,
&:focus { &:focus {
text-decoration: underline; text-decoration: underline;
z-index: 1;
} }
`, `,
activeStyle: css` activeStyle: css`