Navigation: Use correct component for custom branding (#48101)

* Use correct component for whitelabelling

* extract logic into reusable function

public/app/core/components/NavBar/Next/NavBarMenu.tsx

@@ -5,6 +5,7 @@ import { CollapsableSection, CustomScrollbar, Icon, IconButton, IconName, useSty
 import { FocusScope } from '@react-aria/focus';
 import { useDialog } from '@react-aria/dialog';
 import { OverlayContainer, useOverlay } from '@react-aria/overlays';
+import { Branding } from 'app/core/components/Branding/Branding';
 import { css, cx } from '@emotion/css';
 import { NavBarMenuItem } from './NavBarMenuItem';
 import { NavBarItemWithoutMenu } from './NavBarItemWithoutMenu';
@@ -266,12 +267,7 @@ function NavItem({
           isActive={link === activeItem}
         >
           <div className={styles.savedItemsMenuItemWrapper}>
-            <div className={styles.iconContainer}>
+            <div className={styles.iconContainer}>{getLinkIcon(link)}</div>
-              {link.icon && <Icon name={link.icon as IconName} size="xl" />}
-              {link.img && (
-                <img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} />
-              )}
-            </div>
             <span className={styles.linkText}>{link.text}</span>
           </div>
         </NavBarItemWithoutMenu>
@@ -362,10 +358,7 @@ function CollapsibleNavItem({
         className={styles.collapsibleMenuItem}
         elClassName={styles.collapsibleIcon}
       >
-        {link.img && (
+        {getLinkIcon(link)}
-          <img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} />
-        )}
-        {link.icon && <Icon name={link.icon as IconName} size="xl" />}
       </NavBarItemWithoutMenu>
       <div className={styles.collapsibleSectionWrapper}>
         <CollapsableSection
@@ -444,3 +437,15 @@ const getCollapsibleStyles = (theme: GrafanaTheme2) => ({
 function linkHasChildren(link: NavModelItem): link is NavModelItem & { children: NavModelItem[] } {
   return Boolean(link.children && link.children.length > 0);
 }
+
+function getLinkIcon(link: NavModelItem) {
+  if (link.id === 'home') {
+    return <Branding.MenuLogo />;
+  } else if (link.icon) {
+    return <Icon name={link.icon as IconName} size="xl" />;
+  } else if (link.img) {
+    return <img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} />;
+  } else {
+    return null;
+  }
+}

public/app/core/components/NavBar/Next/NavBarNext.tsx

@@ -6,6 +6,7 @@ import { GrafanaTheme2, NavModelItem, NavSection } from '@grafana/data';
 import { CustomScrollbar, Icon, IconName, useTheme2 } from '@grafana/ui';
 import { config, locationService } from '@grafana/runtime';
 import { getKioskMode } from 'app/core/navigation/kiosk';
+import { Branding } from 'app/core/components/Branding/Branding';
 import { KioskMode, StoreState } from 'app/types';
 import { enrichConfigItems, getActiveItem, isMatchOrChildMatch, isSearchActive, SEARCH_ITEM_ID } from '../utils';
 import { OrgSwitcher } from '../../OrgSwitcher';
@@ -96,7 +97,7 @@ export const NavBarNext = React.memo(() => {
                 className={styles.grafanaLogo}
                 url={homeItem.url}
               >
-                <Icon name="grafana" size="xl" />
+                <Branding.MenuLogo />
               </NavBarItemWithoutMenu>
 
               <CustomScrollbar hideVerticalTrack hideHorizontalTrack>