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

* AppChrome: Fix unmount on full page reload

* fix flickering on login page

* Changed logic a bit

public/app/core/components/AppChrome/AppChrome.tsx

@@ -19,13 +19,20 @@ 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.chromeless && (
+        <div className={cx(styles.topNav)}>
           {!state.searchBarHidden && <TopSearchBar />}
           <NavToolbar
             searchBarHidden={state.searchBarHidden}
@@ -36,8 +43,11 @@ export function AppChrome({ children }: Props) {
             onToggleMegaMenu={chrome.toggleMegaMenu}
           />
         </div>
-      <div className={cx(styles.content, state.searchBarHidden && styles.contentNoSearchBar)}>{children}</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',