From 3b0dea612e9bfc9dd9381fbe290e7eb103b8bc1b Mon Sep 17 00:00:00 2001
From: maryia-matskevich-deriv <maryia.frantsava@binary.com>
Date: Wed, 6 Nov 2024 14:12:01 +0300
Subject: [PATCH] fix: [App Separation] UI Bugs (part 2)

---
 src/app/app.scss                              |  4 ++
 .../layout/header/menu-items/menu-items.tsx   | 42 +++++++++++--------
 2 files changed, 28 insertions(+), 18 deletions(-)

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 }) => (
-                    <MenuItem as={as} className='app-header__menu' href={href} key={label} leftComponent={icon}>
-                        <Text>{localize(label)}</Text>
+            {is_logged_in &&
+                (isDesktop ? (
+                    items.map(({ as, href, icon, label }) => (
+                        <MenuItem as={as} className='app-header__menu' href={href} key={label} leftComponent={icon}>
+                            <Text>{localize(label)}</Text>
+                        </MenuItem>
+                    ))
+                ) : (
+                    <MenuItem
+                        as={items[1].as}
+                        className='flex gap-2 p-5'
+                        href={items[1].href}
+                        key={items[1].label}
+                        leftComponent={items[1].icon}
+                    >
+                        <Text>{localize(items[1].label)}</Text>
                     </MenuItem>
-                ))
-            ) : (
-                <MenuItem
-                    as={items[1].as}
-                    className='flex gap-2 p-5'
-                    href={items[1].href}
-                    key={items[1].label}
-                    leftComponent={items[1].icon}
-                >
-                    <Text>{localize(items[1].label)}</Text>
-                </MenuItem>
-            )}
+                ))}
         </>
     );
-};
+});
 
 export const TradershubLink = () => (
     <MenuItem