TopNav: A possible approach having a TopNav that lives outside route (#51301)

* Add topnav in Route

* TopBar: Good progress on a approach that looks promising

* Added some elements to top level

* Get page nav from route

* Progress

* Making breadcrumbs slightly more real

* Updates

* Memoize selector

* Removed some console.log

* correctly type iconName

* betterer updates

* Change setting to hideNav

* Rename again

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

public/app/features/dashboard/components/DashNav/DashNav.tsx

@@ -5,6 +5,7 @@ import { useLocation } from 'react-router-dom';
 import { locationUtil, textUtil } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import { ButtonGroup, ModalsController, ToolbarButton, PageToolbar, useForceUpdate } from '@grafana/ui';
+import { TopNavUpdate } from 'app/core/components/TopNav/TopNavUpdate';
 import config from 'app/core/config';
 import { toggleKioskMode } from 'app/core/navigation/kiosk';
 import { DashboardCommentsModal } from 'app/features/dashboard/components/DashboardComments/DashboardCommentsModal';
@@ -274,6 +275,15 @@ export const DashNav = React.memo<Props>((props) => {
   const parentHref = locationUtil.getUrlForPartial(location, { search: 'open', folder: 'current' });
   const onGoBack = isFullscreen ? onClose : undefined;
 
+  if (config.featureToggles.topnav) {
+    return (
+      <TopNavUpdate
+        subNav={{ text: title }}
+        actions={<ToolbarButton onClick={onOpenSettings} icon="cog"></ToolbarButton>}
+      />
+    );
+  }
+
   return (
     <PageToolbar
       pageIcon={isFullscreen ? undefined : 'apps'}