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

View File

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

View File

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