IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-02 05:29:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* Use correct component for whitelabelling

* extract logic into reusable function
This commit is contained in:
Ashley Harrison 2022-04-22 11:04:23 +01:00 committed by GitHub
parent a34da3e248
commit 5f83fc3c61
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
public/app/core/components/NavBar/Next/NavBarMenu.tsx
View File

@ -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}>
{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>
<div className={styles.iconContainer}>{getLinkIcon(link)}</div>
<span className={styles.linkText}>{link.text}</span>
</div>
</NavBarItemWithoutMenu>
@ -362,10 +358,7 @@ function CollapsibleNavItem({
className={styles.collapsibleMenuItem}
elClassName={styles.collapsibleIcon}
>
{link.img && (
<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" />}
{getLinkIcon(link)}
</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;
}
}

3
public/app/core/components/NavBar/Next/NavBarNext.tsx
View File

@ -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>