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
This commit is contained in:
Ashley Harrison 2023-10-25 14:41:07 +01:00 committed by GitHub
parent 2a43ee5d46
commit 85468d2a67
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 7 deletions

View File

@ -41,10 +41,10 @@ export function AppChrome({ children }: Props) {
chrome.setMegaMenu('closed'); chrome.setMegaMenu('closed');
break; break;
case 'docked': case 'docked':
// on desktop, clicking the button when the menu is docked should close the menu // on large screens, 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 // on smaller screens, the docked menu is hidden, so clicking the button should open the menu
const isDesktop = window.innerWidth > theme.breakpoints.values.md; const isLargeScreen = window.innerWidth >= theme.breakpoints.values.xl;
isDesktop ? chrome.setMegaMenu('closed') : chrome.setMegaMenu('open'); isLargeScreen ? chrome.setMegaMenu('closed') : chrome.setMegaMenu('open');
break; break;
} }
}; };
@ -131,7 +131,7 @@ const getStyles = (theme: GrafanaTheme2) => {
display: 'none', display: 'none',
zIndex: theme.zIndex.navbarFixed, zIndex: theme.zIndex.navbarFixed,
[theme.breakpoints.up('md')]: { [theme.breakpoints.up('xl')]: {
display: 'block', display: 'block',
}, },
}), }),

View File

@ -35,7 +35,7 @@ export class AppChromeService {
searchBarHidden: store.getBool(this.searchBarStorageKey, false), searchBarHidden: store.getBool(this.searchBarStorageKey, false),
megaMenu: megaMenu:
config.featureToggles.dockedMegaMenu && 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' ? 'docked'
: 'closed', : 'closed',
kioskMode: null, kioskMode: null,

View File

@ -117,7 +117,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
dockMenuButton: css({ dockMenuButton: css({
display: 'none', display: 'none',
[theme.breakpoints.up('md')]: { [theme.breakpoints.up('xl')]: {
display: 'inline-flex', display: 'inline-flex',
}, },
}), }),