diff --git a/libs/service-portal/core/src/components/TabNavigation/TabNavigation.tsx b/libs/service-portal/core/src/components/TabNavigation/TabNavigation.tsx index 6a371f092197..a08bfe67c73d 100644 --- a/libs/service-portal/core/src/components/TabNavigation/TabNavigation.tsx +++ b/libs/service-portal/core/src/components/TabNavigation/TabNavigation.tsx @@ -16,6 +16,7 @@ import { useWindowSize } from 'react-use' import InstitutionPanel from '../InstitutionPanel/InstitutionPanel' import * as styles from './TabNavigation.css' import { TabBar } from './TabBar' +import { TabNavigationInstitutionPanel } from './TabNavigationInstitutionPanel' interface Props { pathname?: string @@ -50,14 +51,10 @@ export const TabNavigation: React.FC = ({ items, pathname, label }) => { navigate(id) } } - - const { data: organization, loading } = useOrganization( - activePath?.activeChild?.serviceProvider ?? activePath.serviceProvider, - ) - + const serviceProvider = + activePath?.activeChild?.serviceProvider ?? activePath.serviceProvider const descriptionText = activePath.activeChild?.description ?? activePath?.description - const tooltipText = activePath.activeChild?.serviceProviderTooltip ?? activePath.serviceProviderTooltip @@ -157,23 +154,13 @@ export const TabNavigation: React.FC = ({ items, pathname, label }) => { )} - {(activePath.displayServiceProviderLogo || - activePath?.displayServiceProviderLogo) && + {activePath?.displayServiceProviderLogo && + serviceProvider && !isMobile && ( - - {organization?.logo && ( - - )} - + )} diff --git a/libs/service-portal/core/src/components/TabNavigation/TabNavigationInstitutionPanel.tsx b/libs/service-portal/core/src/components/TabNavigation/TabNavigationInstitutionPanel.tsx new file mode 100644 index 000000000000..343849cc1431 --- /dev/null +++ b/libs/service-portal/core/src/components/TabNavigation/TabNavigationInstitutionPanel.tsx @@ -0,0 +1,39 @@ +import { GridColumn } from '@island.is/island-ui/core' +import { useOrganization } from '@island.is/service-portal/graphql' +import InstitutionPanel from '../InstitutionPanel/InstitutionPanel' +import { MessageDescriptor } from 'react-intl' +import { OrganizationSlugType } from '@island.is/shared/constants' +import { useLocale } from '@island.is/localization' +import { useWindowSize } from 'react-use' +import { theme } from '@island.is/island-ui/theme' + +interface Props { + serviceProvider: OrganizationSlugType + tooltipText?: MessageDescriptor +} + +export const TabNavigationInstitutionPanel = ({ + tooltipText, + serviceProvider, +}: Props) => { + const { formatMessage } = useLocale() + const { data: organization, loading } = useOrganization(serviceProvider) + const { width } = useWindowSize() + + const isMobile = width < theme.breakpoints.md + + return ( + + {organization?.logo && ( + + )} + + ) +}