Navigation: New NavBar designs behind feature toggle (#41045)

* Navigation: Remove plus button behind feature toggle

* Navigation: Add home button behind feature toggle

* Navigation: Move settings/admin to bottom section behind feature toggle

* Navigation: Refactor grafana logo to be a NavBarItem

* Navigation: Create new PluginSection and styling changes to support new sections

* Navigation: Hack to use mobile menu as a mega menu for now

* Navigation: Only render plugin section if there are items

* Navigation: mobile menu is always 100% width if toggle is off

* Navigation: Reset width back to 48 and fix broken css property

* Navigation: Create generic NavBarSection component to reduce repetition

* Navigation: Don't show sublinks for core items

* Navigation: Comments from UX review

* Navigation: Remove mobile menu hack

* Navigation: Unit tests for enrichConfigItems and other minor review comments

* Navigation: Move section logic to backend

* Navigation: Refactor alerting links out into a separate function

* Navigation: More tests for isLinkActive

* Linting...

* Navigation: Create new NavBar component for when feature toggle is enabled

public/app/AppWrapper.tsx

@@ -10,6 +10,7 @@ import { ConfigContext, ThemeProvider } from './core/utils/ConfigProvider';
 import { RouteDescriptor } from './core/navigation/types';
 import { contextSrv } from './core/services/context_srv';
 import { NavBar } from './core/components/NavBar/NavBar';
+import { NavBarNext } from './core/components/NavBar/NavBarNext';
 import { GrafanaRoute } from './core/navigation/GrafanaRoute';
 import { AppNotificationList } from './core/components/AppNotifications/AppNotificationList';
 import { SearchWrapper } from 'app/features/search';
@@ -90,6 +91,7 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
 
     // @ts-ignore
     const appSeed = `<grafana-app ng-cloak></app-notifications-list></grafana-app>`;
+    const newNavigationEnabled = config.featureToggles.newNavigation;
 
     return (
       <Provider store={store}>
@@ -100,7 +102,7 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
                 <GlobalStyles />
                 <div className="grafana-app">
                   <Router history={locationService.getHistory()}>
-                    <NavBar />
+                    {newNavigationEnabled ? <NavBarNext /> : <NavBar />}
                     <main className="main-view">
                       {pageBanners.map((Banner, index) => (
                         <Banner key={index.toString()} />