Merge pull request #117 from maryia-matskevich-deriv/maryia/BOT-2340

maryia/BOT-2340/fix: [App Separation] UI Bugs (part 2)
deriv-com · Nov 12, 2024 · 366ab95 · 366ab95
2 parents 9ff6d3f + 3b0dea6
commit 366ab95
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 18 deletions.
diff --git 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
@@ -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