DockedMenu: only set the menu state to be docked if the window size is big enough (#80379)

* only set the menu docked in state if the window size is big enough

* adjust sizes

* remove top border on dockedMegaMenu

* another css tweak

* use xxl consistently

* CONSISTENTLY

* ok maybe not
This commit is contained in:
Ashley Harrison 2024-01-15 10:12:41 +00:00 committed by GitHub
parent f862bcb509
commit 083605c17f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 2 additions and 2 deletions

View File

@ -131,7 +131,6 @@ const getStyles = (theme: GrafanaTheme2) => {
dockedMegaMenu: css({
background: theme.colors.background.primary,
borderRight: `1px solid ${theme.colors.border.weak}`,
borderTop: `1px solid ${theme.colors.border.weak}`,
display: 'none',
zIndex: theme.zIndex.navbarFixed,

View File

@ -76,7 +76,7 @@ export function AppChromeMenu({}: Props) {
}
const getStyles = (theme: GrafanaTheme2, searchBarHidden?: boolean) => {
const topPosition = (searchBarHidden ? TOP_BAR_LEVEL_HEIGHT : TOP_BAR_LEVEL_HEIGHT * 2) + 1;
const topPosition = searchBarHidden ? TOP_BAR_LEVEL_HEIGHT : TOP_BAR_LEVEL_HEIGHT * 2;
return {
backdrop: css({

View File

@ -33,6 +33,7 @@ export class AppChromeService {
private megaMenuDocked = Boolean(
config.featureToggles.dockedMegaMenu &&
window.innerWidth >= config.theme2.breakpoints.values.xl &&
store.getBool(
DOCKED_LOCAL_STORAGE_KEY,
Boolean(config.featureToggles.dockedMegaMenu && window.innerWidth >= config.theme2.breakpoints.values.xxl)