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

public/app/core/components/PageNew/SectionNav.tsx

@@ -72,6 +72,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       flexShrink: 0,
       transition: theme.transitions.create(['width', 'max-height']),
       maxHeight: 0,
+      visibility: 'hidden',
       [theme.breakpoints.up('md')]: {
         width: 0,
         maxHeight: 'unset',
@@ -79,6 +80,7 @@ const getStyles = (theme: GrafanaTheme2) => {
     }),
     navExpanded: css({
       maxHeight: '50vh',
+      visibility: 'visible',
       [theme.breakpoints.up('md')]: {
         width: '250px',
         maxHeight: 'unset',

public/app/core/components/PageNew/SectionNavItem.tsx

@@ -66,6 +66,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       &:hover,
       &:focus {
         text-decoration: underline;
+        z-index: 1;
       }
     `,
     activeStyle: css`