Thanks to visit codestin.com
Credit goes to github.com

Skip to content
This repository was archived by the owner on May 20, 2025. It is now read-only.

Commit 06aed91

Browse files
nikita-deriv“Nikita”
nikita-deriv
and
“Nikita”
authored
Nikita/To add trading platform deriv go in the navigation bar (#2382)
* feat:add deriv go navigation components * feat: style trade navigation dropdown / add is_eu check * fix: refactor PR remarks * fix: broad of the trade nav * feat: add deriv-go footer link * refactor: place bonary bot nav card / update offset arrow useEffect Co-authored-by: “Nikita” <“[email protected]”>
1 parent 70958b1 commit 06aed91

File tree

6 files changed

+93
-49
lines changed

6 files changed

+93
-49
lines changed

‎src/components/custom/other-platforms.js

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import DBot from 'images/svg/dbot/dbot-icon.svg'
2727
import DMT5 from 'images/svg/dmt5/dmt5-icon.svg'
2828
import BinaryBot from 'images/svg/binarybot-icon.svg'
2929
import DTrader from 'images/svg/dtrader/dtrader-icon.svg'
30+
import DerivGo from 'images/svg/deriv-go/deriv-go-icon.svg'
3031
import Forex from 'images/svg/custom/forex-nav.svg'
3132
import Help from 'images/svg/menu/help-center.svg'
3233
import Leadership from 'images/svg/menu/leadership.svg'
@@ -341,21 +342,6 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
341342
onClick={onClick}
342343
otherLinkProps={{ rel: 'noopener noreferrer' }}
343344
/>
344-
{is_eu_country && (
345-
<NavCard
346-
aria_label="Binary Bot"
347-
icon={() => <img src={BinaryBot} alt="" width="32" height="32" />}
348-
content={
349-
<Localize translate_text="Our classic &ldquo;drag-and-drop&rdquo; tool for creating trading bots, featuring pop-up trading charts, for advanced users." />
350-
}
351-
title={<Localize translate_text="Binary Bot" />}
352-
to="https://bot.deriv.com/"
353-
external="true"
354-
target="_blank"
355-
onClick={onClick}
356-
otherLinkProps={{ rel: 'noopener noreferrer' }}
357-
/>
358-
)}
359345
</Flex>
360346
<Flex direction="column" wrap="wrap" jc="flex-start">
361347
<EmptySpace />
@@ -369,6 +355,18 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
369355
onClick={onClick}
370356
to="/dtrader/"
371357
/>
358+
{!is_eu_country && (
359+
<NavCard
360+
aria_label="DerivGo"
361+
icon={() => <img src={DerivGo} alt="" width="32" height="32" />}
362+
content={
363+
<Localize translate_text="Trade multipliers on forex, cryptocurrencies, and synthetic indices with our mobile app." />
364+
}
365+
title={<Localize translate_text="DerivGo" />}
366+
onClick={onClick}
367+
to="/landing/deriv-go/"
368+
/>
369+
)}
372370
<NavCard
373371
aria_label="DBot"
374372
icon={() => <img src={DBot} alt="" width="32" height="32" />}
@@ -379,21 +377,22 @@ export const NavPlatform = ({ onClick, is_ppc, is_ppc_redirect }) => {
379377
onClick={onClick}
380378
to="/dbot/"
381379
/>
382-
{!is_eu_country && (
383-
<NavCard
384-
aria_label="Binary Bot"
385-
icon={() => <img src={BinaryBot} alt="" width="32" height="32" />}
386-
content={
387-
<Localize translate_text="Our classic &ldquo;drag-and-drop&rdquo; tool for creating trading bots, featuring pop-up trading charts, for advanced users." />
388-
}
389-
title={<Localize translate_text="Binary Bot" />}
390-
to="https://bot.deriv.com/"
391-
external="true"
392-
target="_blank"
393-
onClick={onClick}
394-
otherLinkProps={{ rel: 'noopener noreferrer' }}
395-
/>
396-
)}
380+
</Flex>
381+
<Flex direction="column" wrap="wrap" jc="flex-start">
382+
<EmptySpace />
383+
<NavCard
384+
aria_label="Binary Bot"
385+
icon={() => <img src={BinaryBot} alt="" width="32" height="32" />}
386+
content={
387+
<Localize translate_text="Our classic &ldquo;drag-and-drop&rdquo; tool for creating trading bots, featuring pop-up trading charts, for advanced users." />
388+
}
389+
title={<Localize translate_text="Binary Bot" />}
390+
to="https://bot.deriv.com/"
391+
external="true"
392+
target="_blank"
393+
onClick={onClick}
394+
otherLinkProps={{ rel: 'noopener noreferrer' }}
395+
/>
397396
</Flex>
398397
</Flex>
399398
)

‎src/components/custom/platforms-dropdown.js

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
NavResources,
88
NavMarket,
99
} from 'components/custom/other-platforms.js'
10-
import { Container, Show } from 'components/containers'
10+
import { Container, Show, Flex } from 'components/containers'
1111

1212
const FadeInDown = keyframes`
1313
from {
@@ -19,11 +19,10 @@ const FadeInDown = keyframes`
1919
transform: translateY(7.2rem) rotateY(0);
2020
}
2121
`
22-
2322
const NavDropdown = styled.div`
24-
display: flex;
25-
width: auto;
26-
left: ${(props) => (props.offset ? props.offset + 'px !important' : 'none')};
23+
width: ${(props) => (props.is_trade ? '90%' : 'auto')};
24+
max-width: 1200px;
25+
left: ${(props) => (props.offset && !props.is_trade ? props.offset + 'px !important' : 'none')};
2726
position: absolute;
2827
padding: 2.2rem 0.8rem;
2928
z-index: -1;
@@ -68,18 +67,38 @@ const getNavigationContents = (parent, is_ppc, is_ppc_redirect) => {
6867
if (parent === 'resources') return <NavResources />
6968
}
7069

71-
const PlatformsDropdown = ({ current_ref, is_ppc, is_ppc_redirect, parent, setActiveDropdown }) => {
72-
const [left_offset, setLeftOffset] = useState(current_ref.offsetLeft)
73-
const [left_arrow_offset, setLeftArrowOffset] = useState(current_ref.offsetWidth / 2 - 15)
70+
const PlatformsDropdown = ({
71+
current_ref,
72+
is_ppc,
73+
is_ppc_redirect,
74+
parent,
75+
setActiveDropdown,
76+
active_dropdown,
77+
}) => {
7478
const dropdownContainerRef = useRef(null)
79+
const is_trade = active_dropdown === 'trade'
80+
const current_offset = current_ref.offsetWidth / 2 - 15
81+
const setTradeArrowOffset = (dropdownOffset) =>
82+
current_ref.offsetLeft - dropdownOffset + current_offset
83+
const [left_offset, setLeftOffset] = useState(current_ref.offsetLeft)
84+
const [left_arrow_offset, setLeftArrowOffset] = useState()
7585

7686
const updateOffsets = useCallback(() => {
77-
if (current_ref) {
87+
if (is_trade) {
88+
setLeftArrowOffset(setTradeArrowOffset(dropdownContainerRef.current.offsetLeft))
89+
} else if (current_ref && !is_trade) {
7890
setLeftOffset(current_ref.offsetLeft)
79-
setLeftArrowOffset(current_ref.offsetWidth / 2 - 15)
91+
setLeftArrowOffset(current_offset)
8092
}
8193
}, [current_ref])
8294

95+
const setInitArrowOffset = () => {
96+
const dropdown_offset = dropdownContainerRef.current.offsetLeft
97+
setLeftArrowOffset(is_trade ? setTradeArrowOffset(dropdown_offset) : current_offset)
98+
}
99+
100+
useEffect(() => setInitArrowOffset(), [])
101+
83102
useEffect(() => {
84103
if (dropdownContainerRef) {
85104
setActiveDropdown(dropdownContainerRef)
@@ -92,20 +111,24 @@ const PlatformsDropdown = ({ current_ref, is_ppc, is_ppc_redirect, parent, setAc
92111

93112
return (
94113
<Show.Desktop>
95-
<NavDropdown
96-
ref={dropdownContainerRef}
97-
offset={left_offset}
98-
offset_arrow={left_arrow_offset}
99-
>
100-
<StyledContainer>
101-
{getNavigationContents(parent, is_ppc, is_ppc_redirect)}
102-
</StyledContainer>
103-
</NavDropdown>
114+
<Flex>
115+
<NavDropdown
116+
ref={dropdownContainerRef}
117+
offset={left_offset}
118+
offset_arrow={left_arrow_offset}
119+
is_trade={is_trade}
120+
>
121+
<StyledContainer>
122+
{getNavigationContents(parent, is_ppc, is_ppc_redirect)}
123+
</StyledContainer>
124+
</NavDropdown>
125+
</Flex>
104126
</Show.Desktop>
105127
)
106128
}
107129

108130
PlatformsDropdown.propTypes = {
131+
active_dropdown: PropTypes.string,
109132
current_ref: PropTypes.object,
110133
is_ppc: PropTypes.bool,
111134
is_ppc_redirect: PropTypes.bool,

‎src/components/elements/off-canvas-menu.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import Diagonal from 'images/svg/elements/pink-right-diagonal.svg'
2121
import DMT5 from 'images/svg/dmt5/dmt5-icon.svg'
2222
import DerivX from 'images/svg/custom/deriv-x.svg'
2323
import DTrader from 'images/svg/dtrader/dtrader-icon.svg'
24+
import DerivGo from 'images/svg/deriv-go/deriv-go-icon.svg'
2425
import Forex from 'images/svg/custom/forex-nav.svg'
2526
import Help from 'images/svg/menu/help-center.svg'
2627
import Leadership from 'images/svg/menu/leadership.svg'
@@ -239,6 +240,20 @@ export const OffCanvasMenuWrapper = (props) => {
239240
to="/dtrader/"
240241
/>
241242
</Flex>
243+
{!is_eu_country && (
244+
<Flex mb="2rem">
245+
<NavCard
246+
aria_label="DerivGo"
247+
icon={() => <img src={DerivGo} alt="" width="32" height="32" />}
248+
content={
249+
<Localize translate_text="Trade multipliers on forex, cryptocurrencies, and synthetic indices with our mobile app." />
250+
}
251+
title={<Localize translate_text="DerivGo" />}
252+
onClick={handleArrowClick}
253+
to="/landing/deriv-go/"
254+
/>
255+
</Flex>
256+
)}
242257
<Flex mb="2rem">
243258
<NavCard
244259
aria_label="SmartTrader"

‎src/components/layout/footer/main-links.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@ const MainLinksSection = ({ is_ppc, is_ppc_redirect, is_eu_country }) => {
4040
<LinkWrapper first_child="true">
4141
<Link to="/dtrader/">{localize('DTrader')}</Link>
4242
</LinkWrapper>
43+
{!is_eu_country && (
44+
<LinkWrapper>
45+
<Link to="/landing/deriv-go/">{localize('Deriv Go')}</Link>
46+
</LinkWrapper>
47+
)}
4348
<LinkWrapper>
4449
<Link to="/dbot/">{localize('DBot')}</Link>
4550
</LinkWrapper>

‎src/components/layout/nav.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -531,6 +531,7 @@ const NavDesktop = ({
531531
<>
532532
{active_dropdown && (
533533
<PlatformsDropdown
534+
active_dropdown={active_dropdown}
534535
key={active_dropdown}
535536
current_ref={active_link_ref}
536537
parent={active_dropdown}

‎src/images/svg/deriv-go/deriv-go-icon.svg

Lines changed: 1 addition & 0 deletions
Loading

0 commit comments

Comments
 (0)