diff --git a/src/components/custom/other-platforms.js b/src/components/custom/other-platforms.js index bbe6c332d7a..00bdf11c468 100644 --- a/src/components/custom/other-platforms.js +++ b/src/components/custom/other-platforms.js @@ -27,6 +27,7 @@ import DBot from 'images/svg/dbot/dbot-icon.svg' import DMT5 from 'images/svg/dmt5/dmt5-icon.svg' import BinaryBot from 'images/svg/binarybot-icon.svg' import DTrader from 'images/svg/dtrader/dtrader-icon.svg' +import DerivGo from 'images/svg/deriv-go/deriv-go-icon.svg' import Forex from 'images/svg/custom/forex-nav.svg' import Help from 'images/svg/menu/help-center.svg' import Leadership from 'images/svg/menu/leadership.svg' @@ -341,21 +342,6 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => { onClick={onClick} otherLinkProps={{ rel: 'noopener noreferrer' }} /> - {is_eu_country && ( - } - content={ - - } - title={} - to="https://bot.deriv.com/" - external="true" - target="_blank" - onClick={onClick} - otherLinkProps={{ rel: 'noopener noreferrer' }} - /> - )} @@ -369,6 +355,18 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => { onClick={onClick} to="/dtrader/" /> + {!is_eu_country && ( + } + content={ + + } + title={} + onClick={onClick} + to="/landing/deriv-go/" + /> + )} } @@ -379,21 +377,22 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => { onClick={onClick} to="/dbot/" /> - {!is_eu_country && ( - } - content={ - - } - title={} - to="https://bot.deriv.com/" - external="true" - target="_blank" - onClick={onClick} - otherLinkProps={{ rel: 'noopener noreferrer' }} - /> - )} + + + + } + content={ + + } + title={} + to="https://bot.deriv.com/" + external="true" + target="_blank" + onClick={onClick} + otherLinkProps={{ rel: 'noopener noreferrer' }} + /> ) diff --git a/src/components/custom/platforms-dropdown.js b/src/components/custom/platforms-dropdown.js index e848dd9ca56..a036e371e94 100644 --- a/src/components/custom/platforms-dropdown.js +++ b/src/components/custom/platforms-dropdown.js @@ -7,7 +7,7 @@ import { NavResources, NavMarket, } from 'components/custom/other-platforms.js' -import { Container, Show } from 'components/containers' +import { Container, Show, Flex } from 'components/containers' const FadeInDown = keyframes` from { @@ -19,11 +19,10 @@ const FadeInDown = keyframes` transform: translateY(7.2rem) rotateY(0); } ` - const NavDropdown = styled.div` - display: flex; - width: auto; - left: ${(props) => (props.offset ? props.offset + 'px !important' : 'none')}; + width: ${(props) => (props.is_trade ? '90%' : 'auto')}; + max-width: 1200px; + left: ${(props) => (props.offset && !props.is_trade ? props.offset + 'px !important' : 'none')}; position: absolute; padding: 2.2rem 0.8rem; z-index: -1; @@ -68,18 +67,38 @@ const getNavigationContents = (parent, is_ppc, is_ppc_redirect) => { if (parent === 'resources') return } -const PlatformsDropdown = ({ current_ref, is_ppc, is_ppc_redirect, parent, setActiveDropdown }) => { - const [left_offset, setLeftOffset] = useState(current_ref.offsetLeft) - const [left_arrow_offset, setLeftArrowOffset] = useState(current_ref.offsetWidth / 2 - 15) +const PlatformsDropdown = ({ + current_ref, + is_ppc, + is_ppc_redirect, + parent, + setActiveDropdown, + active_dropdown, +}) => { const dropdownContainerRef = useRef(null) + const is_trade = active_dropdown === 'trade' + const current_offset = current_ref.offsetWidth / 2 - 15 + const setTradeArrowOffset = (dropdownOffset) => + current_ref.offsetLeft - dropdownOffset + current_offset + const [left_offset, setLeftOffset] = useState(current_ref.offsetLeft) + const [left_arrow_offset, setLeftArrowOffset] = useState() const updateOffsets = useCallback(() => { - if (current_ref) { + if (is_trade) { + setLeftArrowOffset(setTradeArrowOffset(dropdownContainerRef.current.offsetLeft)) + } else if (current_ref && !is_trade) { setLeftOffset(current_ref.offsetLeft) - setLeftArrowOffset(current_ref.offsetWidth / 2 - 15) + setLeftArrowOffset(current_offset) } }, [current_ref]) + const setInitArrowOffset = () => { + const dropdown_offset = dropdownContainerRef.current.offsetLeft + setLeftArrowOffset(is_trade ? setTradeArrowOffset(dropdown_offset) : current_offset) + } + + useEffect(() => setInitArrowOffset(), []) + useEffect(() => { if (dropdownContainerRef) { setActiveDropdown(dropdownContainerRef) @@ -92,20 +111,24 @@ const PlatformsDropdown = ({ current_ref, is_ppc, is_ppc_redirect, parent, setAc return ( - - - {getNavigationContents(parent, is_ppc, is_ppc_redirect)} - - + + + + {getNavigationContents(parent, is_ppc, is_ppc_redirect)} + + + ) } PlatformsDropdown.propTypes = { + active_dropdown: PropTypes.string, current_ref: PropTypes.object, is_ppc: PropTypes.bool, is_ppc_redirect: PropTypes.bool, diff --git a/src/components/elements/off-canvas-menu.js b/src/components/elements/off-canvas-menu.js index 7b2e4660f3b..a61824e29ff 100644 --- a/src/components/elements/off-canvas-menu.js +++ b/src/components/elements/off-canvas-menu.js @@ -21,6 +21,7 @@ import Diagonal from 'images/svg/elements/pink-right-diagonal.svg' import DMT5 from 'images/svg/dmt5/dmt5-icon.svg' import DerivX from 'images/svg/custom/deriv-x.svg' import DTrader from 'images/svg/dtrader/dtrader-icon.svg' +import DerivGo from 'images/svg/deriv-go/deriv-go-icon.svg' import Forex from 'images/svg/custom/forex-nav.svg' import Help from 'images/svg/menu/help-center.svg' import Leadership from 'images/svg/menu/leadership.svg' @@ -239,6 +240,20 @@ export const OffCanvasMenuWrapper = (props) => { to="/dtrader/" /> + {!is_eu_country && ( + + } + content={ + + } + title={} + onClick={handleArrowClick} + to="/landing/deriv-go/" + /> + + )} { {localize('DTrader')} + {!is_eu_country && ( + + {localize('Deriv Go')} + + )} {localize('DBot')} diff --git a/src/components/layout/nav.js b/src/components/layout/nav.js index 1fd619974f8..4148bafd621 100644 --- a/src/components/layout/nav.js +++ b/src/components/layout/nav.js @@ -531,6 +531,7 @@ const NavDesktop = ({ <> {active_dropdown && ( \ No newline at end of file