AppChrome: Fix unmount on full page reload (#54897)

* AppChrome: Fix unmount on full page reload

* fix flickering on login page

* Changed logic a bit
This commit is contained in:
Torkel Ödegaard 2022-09-12 15:11:57 +02:00 committed by GitHub
parent be5369d6fa
commit 7198fbaf47
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -19,25 +19,35 @@ export function AppChrome({ children }: Props) {
const { chrome } = useGrafana();
const state = chrome.useState();
if (state.chromeless || !config.featureToggles.topnav) {
if (!config.featureToggles.topnav) {
return <main className="main-view">{children}</main>;
}
const contentClass = cx({
[styles.content]: true,
[styles.contentNoSearchBar]: state.searchBarHidden,
[styles.contentChromeless]: state.chromeless,
});
return (
<main className="main-view">
<div className={styles.topNav}>
{!state.searchBarHidden && <TopSearchBar />}
<NavToolbar
searchBarHidden={state.searchBarHidden}
sectionNav={state.sectionNav}
pageNav={state.pageNav}
actions={state.actions}
onToggleSearchBar={chrome.toggleSearchBar}
onToggleMegaMenu={chrome.toggleMegaMenu}
/>
</div>
<div className={cx(styles.content, state.searchBarHidden && styles.contentNoSearchBar)}>{children}</div>
<MegaMenu searchBarHidden={state.searchBarHidden} onClose={() => chrome.setMegaMenu(false)} />
{!state.chromeless && (
<div className={cx(styles.topNav)}>
{!state.searchBarHidden && <TopSearchBar />}
<NavToolbar
searchBarHidden={state.searchBarHidden}
sectionNav={state.sectionNav}
pageNav={state.pageNav}
actions={state.actions}
onToggleSearchBar={chrome.toggleSearchBar}
onToggleMegaMenu={chrome.toggleMegaMenu}
/>
</div>
)}
<div className={contentClass}>{children}</div>
{!state.chromeless && (
<MegaMenu searchBarHidden={state.searchBarHidden} onClose={() => chrome.setMegaMenu(false)} />
)}
</main>
);
}
@ -58,6 +68,9 @@ const getStyles = (theme: GrafanaTheme2) => {
contentNoSearchBar: css({
paddingTop: TOP_BAR_LEVEL_HEIGHT,
}),
contentChromeless: css({
paddingTop: 0,
}),
topNav: css({
display: 'flex',
position: 'fixed',