From 85468d2a67638f8930b67e50b826403f21e1f38d Mon Sep 17 00:00:00 2001 From: Ashley Harrison 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', }, }),