Merge pull request #394 from deriv-com/hasan/update-mobile-nav-height

Hasan/DPROD-3545/added a class props to mobile nav
deriv-com · Mar 15, 2024 · 03cc36c · 03cc36c
2 parents 3a4eced + 8cfc803
commit 03cc36c
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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}