MaryiaF/fix: bold the menu option when the user has gone by the child…

packages/components/src/components/mobile-drawer/mobile-drawer-submenu.jsx

@@ -13,6 +13,7 @@ const SubMenu = ({
     submenu_icon,
     submenu_title,
     submenu_suffix_icon,
+    route_config_path,
 }) => {
     const [is_expanded, setIsExpanded] = React.useState(false);
 
@@ -28,7 +29,11 @@ const SubMenu = ({
             <div className={classNames('dc-mobile-drawer__submenu-toggle', submenu_toggle_class)} onClick={toggleMenu}>
                 {submenu_icon && <Icon className='dc-mobile-drawer__submenu-toggle-icon' icon={submenu_icon} />}
                 {submenu_title && (
-                    <Text as='h3' size='xs'>
+                    <Text
+                        as='h3'
+                        size='xs'
+                        weight={window.location.pathname.startsWith(route_config_path) ? 'bold' : null}
+                    >
                         {submenu_title}
                     </Text>
                 )}

packages/core/src/App/Components/Layout/Header/toggle-menu-drawer.jsx

@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
-import { Div100vhContainer, Icon, MobileDrawer, ToggleSwitch } from '@deriv/components';
+import { Div100vhContainer, Icon, MobileDrawer, ToggleSwitch, Text } from '@deriv/components';
 import { routes, PlatformContext } from '@deriv/shared';
 import { localize, getAllowedLanguages } from '@deriv/translations';
 import { NetworkStatus } from 'App/Components/Layout/Footer';
@@ -64,7 +64,14 @@ const MenuLink = ({
             onClick={onClickLink}
         >
             <Icon className='header__menu-mobile-link-icon' icon={icon} />
-            <span className='header__menu-mobile-link-text'>{text}</span>
+            <Text
+                className={text === localize('Trade') ? '' : 'header__menu-mobile-link-text'}
+                as='h3'
+                size='xs'
+                weight={window.location.pathname === '/' && text === localize('Trade') ? 'bold' : null}
+            >
+                {text}
+            </Text>
             {suffix_icon && <Icon className='header__menu-mobile-link-suffix-icon' icon={suffix_icon} />}
         </BinaryLink>
     );
@@ -178,6 +185,7 @@ const ToggleMenuDrawer = React.forwardRef(
                     submenu_title={route_config.getTitle()}
                     submenu_suffix_icon='IcChevronRight'
                     onToggle={expandSubMenu}
+                    route_config_path={route_config.path}
                 >
                     {!has_subroutes &&
                         route_config.routes.map((route, index) => {