From d193d9a8e5b51ba10c148dc44960b638303c610f Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Tue, 26 Dec 2023 11:14:32 +0800
Subject: [PATCH 1/2] chore: active menu item

---
 .../navigation/desktop/desktop.nav-item.tsx   | 22 ++++++++++++++-----
 package-lock.json                             | 14 ------------
 2 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx b/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx
index 3d8c06e89..77de0883f 100644
--- a/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx
+++ b/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx
@@ -1,21 +1,31 @@
+import React, { useEffect, useState } from 'react';
 import { CustomLink } from '@deriv-com/components';
 import { useLanguageSwitcher, useNavigation } from '@deriv-com/hooks';
 import { NavItem } from '@deriv-com/providers';
 import { Text } from '@deriv/quill-design';
-import React from 'react';
-
 export interface DesktopNavItemProps {
   item: NavItem;
   navItemName: string;
 }
-
+const removeTrailingSlash = (str: string) => {
+  return str.replace(/\/+$/, '');
+};
 export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
   item,
   navItemName,
 }) => {
   const { onListItemHover } = useNavigation();
   const { setShowLangContent } = useLanguageSwitcher();
-
+  const [isActive, setIsActive] = useState(false);
+  useEffect(() => {
+    if (item.type === 'direct') {
+      const { pathname } = window.location;
+      setIsActive(
+        removeTrailingSlash(pathname) === removeTrailingSlash(item.href),
+      );
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   return (
     !item.isMobileNavOnly && (
       <li
@@ -29,7 +39,7 @@ export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
       >
         {item.type === 'direct' ? (
           <CustomLink
-            className="text-typography-default group-hover:text-typography-prominent"
+            className="group-hover:text-typography-prominent aria-[current=true]:text-typography-prominent"
             href={item.href}
             hasHoverDecoration={false}
             onMouseEnter={() => {
@@ -37,6 +47,7 @@ export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
               onListItemHover?.(navItemName);
             }}
             target={item.target}
+            aria-current={isActive}
           >
             {item.text}
           </CustomLink>
@@ -52,5 +63,4 @@ export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
     )
   );
 };
-
 export default DesktopNavItem;
diff --git a/package-lock.json b/package-lock.json
index 71ef4c49c..101573e5f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -77,7 +77,6 @@
         "@vitest/coverage-v8": "~0.32.0",
         "@vitest/ui": "~0.32.0",
         "autoprefixer": "10.4.13",
-        "babel-plugin-direct-import": "^1.0.0",
         "chromatic": "^7.2.0",
         "core-js": "^3.6.5",
         "eslint": "~8.46.0",
@@ -13760,19 +13759,6 @@
         "@babel/core": "^7.0.0-0"
       }
     },
-    "node_modules/babel-plugin-direct-import": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-direct-import/-/babel-plugin-direct-import-1.0.0.tgz",
-      "integrity": "sha512-WQCA5RJz/VVKHoxNKMrXc5YdsWw2d3vN2vrfKMdHLzf3+YROzKtlcZFhRjYx82nd30ijtWD4cxhV7RssUpCfjw==",
-      "dev": true,
-      "dependencies": {
-        "resolve": "^1.20.0"
-      },
-      "engines": {
-        "node": ">=12.0.0",
-        "npm": ">=7"
-      }
-    },
     "node_modules/babel-plugin-istanbul": {
       "version": "6.1.1",
       "resolved": "https://registry.npmjs.org/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz",

From 9ae3d3b170e21ca09a1ad4a7d2b33de9cc00bab5 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <nuzhy@deriv.com>
Date: Tue, 26 Dec 2023 12:25:55 +0800
Subject: [PATCH 2/2] fix: menu text color

---
 libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx | 4 ++--
 libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx   | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx b/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx
index 77de0883f..198c98a4a 100644
--- a/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx
+++ b/libs/blocks/src/lib/navigation/desktop/desktop.nav-item.tsx
@@ -18,7 +18,7 @@ export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
   const { setShowLangContent } = useLanguageSwitcher();
   const [isActive, setIsActive] = useState(false);
   useEffect(() => {
-    if (item.type === 'direct') {
+    if (item.type === 'direct' && typeof window !== undefined) {
       const { pathname } = window.location;
       setIsActive(
         removeTrailingSlash(pathname) === removeTrailingSlash(item.href),
@@ -39,7 +39,7 @@ export const DesktopNavItem: React.FC<DesktopNavItemProps> = ({
       >
         {item.type === 'direct' ? (
           <CustomLink
-            className="group-hover:text-typography-prominent aria-[current=true]:text-typography-prominent"
+            className="text-typography-default group-hover:text-typography-prominent aria-[current=true]:text-typography-prominent"
             href={item.href}
             hasHoverDecoration={false}
             onMouseEnter={() => {
diff --git a/libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx b/libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx
index 170ab2213..a975fcbcf 100644
--- a/libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx
+++ b/libs/blocks/src/lib/navigation/mobile/mobile.nav-link.tsx
@@ -20,6 +20,7 @@ export const MobileNavLink: React.FC<MobileNavLinkProps> = ({
       href={item.href}
       hasHoverDecoration={false}
       className={qtMerge(
+        'text-typography-default',
         'py-general-sm text-body-md font-bold leading-body-md',
         'hover:text-typography-prominent',
         className,