Navigation: adjust megamenu position in mobile (#56262)

* adjust megamenu position in mobile

* improve mobile breadcrumb logic

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',

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,

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,
     },
   };