From 7e5509891ac3c97191d6f8040a09df70384f353e Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Tue, 4 Oct 2022 10:40:34 +0100
Subject: [PATCH] Navigation: adjust megamenu position in mobile (#56262)

* adjust megamenu position in mobile

* improve mobile breadcrumb logic
---
 .../app/core/components/AppChrome/TopSearchBar.tsx   |  2 +-
 .../core/components/Breadcrumbs/BreadcrumbItem.tsx   |  8 ++++++++
 public/app/core/components/MegaMenu/NavBarMenu.tsx   | 12 ++++++++----
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/public/app/core/components/AppChrome/TopSearchBar.tsx b/public/app/core/components/AppChrome/TopSearchBar.tsx
index 0a982eb8e1a..d3fe6a94d2d 100644
--- a/public/app/core/components/AppChrome/TopSearchBar.tsx
+++ b/public/app/core/components/AppChrome/TopSearchBar.tsx
@@ -65,7 +65,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       gridTemplateColumns: '1fr 2fr 1fr',
       padding: theme.spacing(0, 2),
       alignItems: 'center',
-      border: `1px solid ${theme.colors.border.weak}`,
+      borderBottom: `1px solid ${theme.colors.border.weak}`,
     }),
     leftContent: css({
       display: 'flex',
diff --git a/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx b/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
index 7114b3083ad..45d6a565ad3 100644
--- a/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
+++ b/public/app/core/components/Breadcrumbs/BreadcrumbItem.tsx
@@ -61,6 +61,7 @@ const getStyles = (theme: GrafanaTheme2) => {
 
       // logic for small screens
       // hide any breadcrumbs that aren't the second to last child (the parent)
+      // unless there's only one breadcrumb, in which case we show it
       [theme.breakpoints.down('md')]: {
         display: 'none',
         '&:nth-last-child(2)': {
@@ -71,6 +72,13 @@ const getStyles = (theme: GrafanaTheme2) => {
             transform: 'rotate(180deg)',
           },
         },
+        '&:first-child&:last-child': {
+          display: 'flex',
+
+          [`.${separator}`]: {
+            display: 'none',
+          },
+        },
       },
     }),
     separator,
diff --git a/public/app/core/components/MegaMenu/NavBarMenu.tsx b/public/app/core/components/MegaMenu/NavBarMenu.tsx
index 596b1fe9bc5..79459828fec 100644
--- a/public/app/core/components/MegaMenu/NavBarMenu.tsx
+++ b/public/app/core/components/MegaMenu/NavBarMenu.tsx
@@ -111,8 +111,12 @@ const getStyles = (theme: GrafanaTheme2, searchBarHidden?: boolean) => {
       left: 0,
       position: 'fixed',
       right: 0,
-      top: topPosition,
+      top: searchBarHidden ? 0 : TOP_BAR_LEVEL_HEIGHT,
       zIndex: theme.zIndex.modalBackdrop,
+
+      [theme.breakpoints.up('md')]: {
+        top: topPosition,
+      },
     }),
     container: css({
       display: 'flex',
@@ -124,12 +128,13 @@ const getStyles = (theme: GrafanaTheme2, searchBarHidden?: boolean) => {
       // Needs to below navbar should we change the navbarFixed? add add a new level?
       zIndex: theme.zIndex.modal,
       position: 'fixed',
-      top: topPosition,
+      top: searchBarHidden ? 0 : TOP_BAR_LEVEL_HEIGHT,
       backgroundColor: theme.colors.background.primary,
       boxSizing: 'content-box',
       [theme.breakpoints.up('md')]: {
         borderRight: `1px solid ${theme.colors.border.weak}`,
         right: 'unset',
+        top: topPosition,
       },
     }),
     content: css({
@@ -138,7 +143,6 @@ const getStyles = (theme: GrafanaTheme2, searchBarHidden?: boolean) => {
       overflow: 'auto',
     }),
     mobileHeader: css({
-      borderBottom: `1px solid ${theme.colors.border.weak}`,
       display: 'flex',
       justifyContent: 'space-between',
       padding: theme.spacing(1, 2),
@@ -179,9 +183,9 @@ const getAnimStyles = (theme: GrafanaTheme2, animationDuration: number) => {
   };
 
   const overlayOpen = {
-    boxShadow: theme.shadows.z3,
     width: '100%',
     [theme.breakpoints.up('md')]: {
+      boxShadow: theme.shadows.z3,
       width: MENU_WIDTH,
     },
   };