From a8a4de06cc40d1ac2660d66eff9c5b09434a6c5f Mon Sep 17 00:00:00 2001
From: hasan-deriv <abuhasan@deriv.com>
Date: Fri, 15 Mar 2024 11:03:48 +0800
Subject: [PATCH] chore: added a class props to mobile height

---
 libs/blocks/src/lib/navigation/index.tsx            |  3 +++
 libs/blocks/src/lib/navigation/mobile/index.tsx     |  3 ++-
 .../src/lib/navigation/mobile/mobile.wrapper.tsx    | 13 ++++++++++---
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/libs/blocks/src/lib/navigation/index.tsx b/libs/blocks/src/lib/navigation/index.tsx
index 9efccd8c8..c685e0775 100644
--- a/libs/blocks/src/lib/navigation/index.tsx
+++ b/libs/blocks/src/lib/navigation/index.tsx
@@ -9,6 +9,7 @@ export interface NavigationProps {
   items?: NavLinkItems;
   hasLanguageSwitch?: boolean;
   topNavigation?: () => ReactNode;
+  mobileWrapClass?: string;
 }
 
 export const NavigationBlock = ({
@@ -17,6 +18,7 @@ export const NavigationBlock = ({
   items = {},
   hasLanguageSwitch = true,
   topNavigation,
+  mobileWrapClass,
 }: NavigationProps) => {
   return (
     <NavigationProvider navItems={items}>
@@ -32,6 +34,7 @@ export const NavigationBlock = ({
         renderLogo={renderLogo}
         hasLanguageSwitch={hasLanguageSwitch}
         topNavigation={topNavigation}
+        mobileWrapClass={mobileWrapClass}
       />
     </NavigationProvider>
   );
diff --git a/libs/blocks/src/lib/navigation/mobile/index.tsx b/libs/blocks/src/lib/navigation/mobile/index.tsx
index 474f8540c..1a2143265 100644
--- a/libs/blocks/src/lib/navigation/mobile/index.tsx
+++ b/libs/blocks/src/lib/navigation/mobile/index.tsx
@@ -11,6 +11,7 @@ export const MobileNav: React.FC<NavigationProps> = ({
   renderButtons,
   hasLanguageSwitch,
   topNavigation,
+  mobileWrapClass,
 }) => {
   return (
     <FluidContainer
@@ -20,7 +21,7 @@ export const MobileNav: React.FC<NavigationProps> = ({
       {topNavigation?.()}
       <nav className="flex min-h-[80px] w-full flex-row items-center justify-between md:gap-gap-3xl">
         {renderLogo?.()}
-        <NavMobileWrapper>
+        <NavMobileWrapper mobileWrapClass={mobileWrapClass}>
           <div className="flex h-full flex-col justify-between">
             <MobileHeader />
             <div className="relative flex flex-1 flex-col justify-between px-general-2xl pb-general-lg sm:pb-general-md">
diff --git a/libs/blocks/src/lib/navigation/mobile/mobile.wrapper.tsx b/libs/blocks/src/lib/navigation/mobile/mobile.wrapper.tsx
index 50f8fba52..4f0853536 100644
--- a/libs/blocks/src/lib/navigation/mobile/mobile.wrapper.tsx
+++ b/libs/blocks/src/lib/navigation/mobile/mobile.wrapper.tsx
@@ -1,21 +1,28 @@
 import { useNavigation } from '@deriv-com/hooks';
-import clsx from 'clsx';
+import { qtMerge } from '@deriv/quill-design';
 import { ReactNode } from 'react';
 
-export const NavMobileWrapper: React.FC<{ children: ReactNode }> = ({
+interface NavMobileWrapperProps {
+  children: ReactNode;
+  mobileWrapClass?: string;
+}
+
+export const NavMobileWrapper: React.FC<NavMobileWrapperProps> = ({
   children,
+  mobileWrapClass,
 }) => {
   const { isMobileNavOpen } = useNavigation();
 
   return (
     <div
-      className={clsx(
+      className={qtMerge(
         'absolute',
         'h-[100dvh] w-screen',
         'left-50 top-50',
         'bg-background-primary-container',
         '-translate-y-full transition-all duration-500 ease-in-out',
         isMobileNavOpen && 'translate-y-50',
+        mobileWrapClass,
       )}
     >
       {children}