From f74b7bc2c1e383039e4053f72fa30c1f994cc7a3 Mon Sep 17 00:00:00 2001
From: "Ali(Ako) Hosseini" <ali.hosseini@firstsource.tech>
Date: Mon, 17 Jan 2022 14:30:52 +0330
Subject: [PATCH] feat/ add method to get base ref of passed element

---
 src/common/utility.js        |  7 +++++++
 src/components/layout/nav.js | 24 ++++++++++++++----------
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/src/common/utility.js b/src/common/utility.js
index d9107cb68c3..4531dd9963f 100644
--- a/src/common/utility.js
+++ b/src/common/utility.js
@@ -347,3 +347,10 @@ export const slugify = (text) =>
         .replace(/\s+/g, '-') // Replace spaces with -
         .replace(/[^\w-]+/g, '') // Remove all non-word chars
         .replace(/--+/g, '-') // Replace multiple - with single -
+
+export const getBaseRef = (ref) => {
+    // this is intended to solve a problem of preact that
+    // in some cases element api's are in the ref.current.base and
+    // in other cases they are in ref.current
+    return ref?.current?.base?.style ? ref?.current?.base : ref?.current
+}
diff --git a/src/components/layout/nav.js b/src/components/layout/nav.js
index b6dcc925095..cc140578941 100644
--- a/src/components/layout/nav.js
+++ b/src/components/layout/nav.js
@@ -25,6 +25,7 @@ import {
     getLanguage,
     getDerivAppLocalizedURL,
     redirectToTradingPlatform,
+    getBaseRef,
 } from 'common/utility'
 // Icons
 import Logo from 'images/svg/layout/logo-deriv.svg'
@@ -213,18 +214,20 @@ const NavRight = styled.div`
     }};
     transform: translateX(
         ${(props) => {
+            const ref_base = getBaseRef(props.button_ref)
+
             if (props.hide_signup_login) {
                 return 0
             } else if (props.move && !props.hide_signup_login) {
-                if (props.button_ref.current && props.mounted) {
-                    props.button_ref.current.style.opacity = 1
+                if (ref_base && props.mounted) {
+                    ref_base.style.opacity = 1
                 }
                 return 0
             } else {
-                if (props.button_ref.current && props.mounted) {
-                    props.button_ref.current.style.opacity = 0
+                if (ref_base && props.mounted) {
+                    ref_base.style.opacity = 0
 
-                    const calculation = props.button_ref.current.offsetWidth + 2
+                    const calculation = ref_base.offsetWidth + 2
                     return `${calculation}px`
                 }
                 return '300px'
@@ -843,16 +846,17 @@ const StyledNavRight = styled(NavRight)`
     margin-left: auto;
     transform: translateX(
         ${(props) => {
+            const ref_base = getBaseRef(props.button_ref)
             if (props.move) {
-                if (props.button_ref.current && props.mounted) {
-                    props.button_ref.current.style.opacity = 1
+                if (ref_base && props.mounted) {
+                    ref_base.style.opacity = 1
                 }
                 return '50px'
             } else {
-                if (props.button_ref.current && props.mounted) {
-                    props.button_ref.current.style.opacity = 0
+                if (ref_base && props.mounted) {
+                    ref_base.style.opacity = 0
 
-                    const calculation = props.button_ref.current.offsetWidth + 50
+                    const calculation = ref_base.offsetWidth + 50
                     return `${calculation}px`
                 }
                 return '225px'