From 85468d2a67638f8930b67e50b826403f21e1f38d Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Wed, 25 Oct 2023 14:41:07 +0100
Subject: [PATCH] DockedMegaMenu: Adjust docked threshold (#77139)

* adjust docked threshold to be xl instead of md and make sure it's open by default on 1440 res

* don't show dock menu button
---
 public/app/core/components/AppChrome/AppChrome.tsx     | 10 +++++-----
 .../app/core/components/AppChrome/AppChromeService.tsx |  2 +-
 .../components/AppChrome/DockedMegaMenu/MegaMenu.tsx   |  2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx
index 4dcc1c114db..b73009538a6 100644
--- a/public/app/core/components/AppChrome/AppChrome.tsx
+++ b/public/app/core/components/AppChrome/AppChrome.tsx
@@ -41,10 +41,10 @@ export function AppChrome({ children }: Props) {
         chrome.setMegaMenu('closed');
         break;
       case 'docked':
-        // on desktop, clicking the button when the menu is docked should close the menu
-        // on mobile, the docked menu is hidden, so clicking the button should open the menu
-        const isDesktop = window.innerWidth > theme.breakpoints.values.md;
-        isDesktop ? chrome.setMegaMenu('closed') : chrome.setMegaMenu('open');
+        // on large screens, clicking the button when the menu is docked should close the menu
+        // on smaller screens, the docked menu is hidden, so clicking the button should open the menu
+        const isLargeScreen = window.innerWidth >= theme.breakpoints.values.xl;
+        isLargeScreen ? chrome.setMegaMenu('closed') : chrome.setMegaMenu('open');
         break;
     }
   };
@@ -131,7 +131,7 @@ const getStyles = (theme: GrafanaTheme2) => {
       display: 'none',
       zIndex: theme.zIndex.navbarFixed,
 
-      [theme.breakpoints.up('md')]: {
+      [theme.breakpoints.up('xl')]: {
         display: 'block',
       },
     }),
diff --git a/public/app/core/components/AppChrome/AppChromeService.tsx b/public/app/core/components/AppChrome/AppChromeService.tsx
index 9e19c5d0f16..83032e0dd63 100644
--- a/public/app/core/components/AppChrome/AppChromeService.tsx
+++ b/public/app/core/components/AppChrome/AppChromeService.tsx
@@ -35,7 +35,7 @@ export class AppChromeService {
     searchBarHidden: store.getBool(this.searchBarStorageKey, false),
     megaMenu:
       config.featureToggles.dockedMegaMenu &&
-      store.getBool(DOCKED_LOCAL_STORAGE_KEY, window.innerWidth > config.theme2.breakpoints.values.xxl)
+      store.getBool(DOCKED_LOCAL_STORAGE_KEY, window.innerWidth >= config.theme2.breakpoints.values.xxl)
         ? 'docked'
         : 'closed',
     kioskMode: null,
diff --git a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx
index ca3a90e364e..3f615d45a8b 100644
--- a/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx
+++ b/public/app/core/components/AppChrome/DockedMegaMenu/MegaMenu.tsx
@@ -117,7 +117,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
   dockMenuButton: css({
     display: 'none',
 
-    [theme.breakpoints.up('md')]: {
+    [theme.breakpoints.up('xl')]: {
       display: 'inline-flex',
     },
   }),