From ca3bcc691c0b67ab478535920d5bacaa08da6274 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 4 Nov 2022 16:42:34 +0000
Subject: [PATCH] hide sectionnav items when collapsed, ensure focus ring
 overlays active items (#58250)

---
 public/app/core/components/PageNew/SectionNav.tsx     | 2 ++
 public/app/core/components/PageNew/SectionNavItem.tsx | 1 +
 2 files changed, 3 insertions(+)

diff --git a/public/app/core/components/PageNew/SectionNav.tsx b/public/app/core/components/PageNew/SectionNav.tsx
index db0abc1b6ff..d44fd9171ec 100644
--- a/public/app/core/components/PageNew/SectionNav.tsx
+++ b/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',
diff --git a/public/app/core/components/PageNew/SectionNavItem.tsx b/public/app/core/components/PageNew/SectionNavItem.tsx
index 15fcff83259..a615a9026ac 100644
--- a/public/app/core/components/PageNew/SectionNavItem.tsx
+++ b/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`