fix: added markets bottom navigation (#6377)

* fix: added markets bottom navigation * fix: added markets bottm nav to etf page
binary-com · Dec 28, 2023 · 3530cb4 · 3530cb4 · vercel · Dec 28, 2023
1 parent afef91d
commit 3530cb4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 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
@@ -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
@@ -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
@@ -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>