diff --git a/src/app/app.scss b/src/app/app.scss index 8befca91..f5b68e2e 100644 --- a/src/app/app.scss +++ b/src/app/app.scss @@ -38,3 +38,7 @@ opacity: 1; z-index: 9998; } + +strong { + font-weight: bold; +} diff --git a/src/components/layout/header/menu-items/menu-items.tsx b/src/components/layout/header/menu-items/menu-items.tsx index b6a945fd..a6384da9 100644 --- a/src/components/layout/header/menu-items/menu-items.tsx +++ b/src/components/layout/header/menu-items/menu-items.tsx @@ -1,34 +1,40 @@ +import { observer } from 'mobx-react-lite'; +import { useStore } from '@/hooks/useStore'; import { useTranslations } from '@deriv-com/translations'; import { MenuItem, Text, useDevice } from '@deriv-com/ui'; import { MenuItems as items, TRADERS_HUB_LINK_CONFIG } from '../header-config'; import './menu-items.scss'; -export const MenuItems = () => { +export const MenuItems = observer(() => { const { localize } = useTranslations(); const { isDesktop } = useDevice(); + const store = useStore(); + if (!store) return null; + const { is_logged_in } = store.client; return ( <> - {isDesktop ? ( - items.map(({ as, href, icon, label }) => ( - - {localize(label)} + {is_logged_in && + (isDesktop ? ( + items.map(({ as, href, icon, label }) => ( + + {localize(label)} + + )) + ) : ( + + {localize(items[1].label)} - )) - ) : ( - - {localize(items[1].label)} - - )} + ))} ); -}; +}); export const TradershubLink = () => (