From 7198fbaf47a556c47456fe884cac44566653acdd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 12 Sep 2022 15:11:57 +0200
Subject: [PATCH] AppChrome: Fix unmount on full page reload (#54897)

* AppChrome: Fix unmount on full page reload

* fix flickering on login page

* Changed logic a bit
---
 .../core/components/AppChrome/AppChrome.tsx   | 41 ++++++++++++-------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/public/app/core/components/AppChrome/AppChrome.tsx b/public/app/core/components/AppChrome/AppChrome.tsx
index 950286821eb..879e1a28b08 100644
--- a/public/app/core/components/AppChrome/AppChrome.tsx
+++ b/public/app/core/components/AppChrome/AppChrome.tsx
@@ -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',