From 3530cb44041a172d68b8e6f76961b7fe7b6f0059 Mon Sep 17 00:00:00 2001
From: Nuzhy-Deriv <125249108+Nuzhy-Deriv@users.noreply.github.com>
Date: Thu, 28 Dec 2023 10:23:29 +0800
Subject: [PATCH] fix: added markets bottom navigation (#6377)

* fix: added markets bottom navigation

* fix: added markets bottm nav to etf page
---
 .../markets/market-banner/styles.module.scss          |  2 +-
 src/features/pages/markets/etf/index.tsx              | 10 +++++++++-
 .../markets/components/sections/_hero_derived_fx.tsx  | 11 ++++++++++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/features/components/organisms/markets/market-banner/styles.module.scss b/src/features/components/organisms/markets/market-banner/styles.module.scss
index 8375de27302..a89a4d9556a 100644
--- a/src/features/components/organisms/markets/market-banner/styles.module.scss
+++ b/src/features/components/organisms/markets/market-banner/styles.module.scss
@@ -14,7 +14,7 @@
     }
 }
 .flex_container {
-    padding-block-start: 7rem;
+    padding-block-start: 8rem;
     @include breakpoints(tablet) {
         position: relative;
         min-block-size: 36rem;
diff --git a/src/features/pages/markets/etf/index.tsx b/src/features/pages/markets/etf/index.tsx
index 110994eefcb..f5cbb8ff11b 100644
--- a/src/features/pages/markets/etf/index.tsx
+++ b/src/features/pages/markets/etf/index.tsx
@@ -13,12 +13,20 @@ import OtherMarketsSlider from 'features/components/molecules/other-markets-slid
 import MainFooter from 'features/components/templates/footer/'
 import MainRowNavigation from 'features/components/templates/navigation/main-nav'
 import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param'
+import MarketBottomNav from 'features/components/templates/navigation/template/market-bottom-nav'
 
 const ETFMarket = () => {
     const { is_deriv_go } = usePlatformQueryParam()
     return (
         <Layout>
-            {!is_deriv_go && <MainRowNavigation />}
+            {!is_deriv_go && (
+                <div className="fixed z-[4] w-full">
+                    <MainRowNavigation />
+                    <div className="pt-[8rem]">
+                        <MarketBottomNav />
+                    </div>
+                </div>
+            )}
             <Banner />
             <TradeTypes />
             <Flex.Box
diff --git a/src/pages/markets/components/sections/_hero_derived_fx.tsx b/src/pages/markets/components/sections/_hero_derived_fx.tsx
index 142cd4ad01e..eea43a83275 100644
--- a/src/pages/markets/components/sections/_hero_derived_fx.tsx
+++ b/src/pages/markets/components/sections/_hero_derived_fx.tsx
@@ -12,6 +12,7 @@ import { handleGetTrading } from 'components/custom/utils'
 import { usePlatformQueryParam } from 'components/hooks/use-platform-query-param'
 import { TString } from 'types/generics'
 import MainRowNavigation from 'features/components/templates/navigation/main-nav'
+import MarketBottomNav from 'features/components/templates/navigation/template/market-bottom-nav'
 
 type ContainerProps = {
     isDerivGo?: boolean
@@ -80,6 +81,7 @@ const StyledHeader = styled.h1<ContainerProps>`
     }
 `
 const BackgroundStyle = styled.div`
+    padding-top: 14rem;
     background-color: var(--color-white);
     flex: 1;
     height: 65rem;
@@ -201,7 +203,14 @@ export const DerivedFXHero = ({
 
     return (
         <>
-            {!is_deriv_go && <MainRowNavigation />}
+            {!is_deriv_go && (
+                <div className="fixed z-[4] w-full">
+                    <MainRowNavigation />
+                    <div className="pt-[8rem]">
+                        <MarketBottomNav />
+                    </div>
+                </div>
+            )}
             <BackgroundStyle>
                 <StyledContainer jc="flex-start">
                     <ContentWrapperStyle>