Merge pull request #131 from niloofar-deriv/drawer

Niloofar/ Mobile SideMenu

Author: farrah-deriv

package-lock.json

@@ -17,7 +17,7 @@
         "@babel/preset-env": "^7.24.5",
         "@deriv-com/api-hooks": "^1.1.3",
         "@deriv-com/translations": "^1.2.4",
-        "@deriv-com/ui": "^1.28.2",
+        "@deriv-com/ui": "^1.28.3",
         "@deriv-com/utils": "^0.0.25",
         "@deriv/deriv-api": "^1.0.15",
         "@deriv/quill-design": "^1.2.24",

package.json

@@ -1,71 +1,66 @@
-import { useState } from 'react';
-import { MenuItem, Submenu, Text, useDevice } from '@deriv-com/ui';
+import clsx from 'clsx';
+import { MenuItem, Text, useDevice } from '@deriv-com/ui';
 import { PlatformSwitcher } from '../PlatformSwitcher';
-import { MobileMenuConfig, TSubmenuSection } from './MobileMenuConfig';
-import { SubmenuContent } from './SubmenuContent';
+import { MobileMenuConfig } from './MobileMenuConfig';
 
 export const MenuContent = () => {
-    const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
-    const [renderSubmenuFor, setRenderSubmenuFor] = useState<TSubmenuSection>('accountSettings');
     const { isMobile } = useDevice();
-
-    const data = MobileMenuConfig().menuConfig;
+    const textSize = isMobile ? 'md' : 'sm';
 
     return (
         <div className='flex flex-col h-full'>
-            {!isSubmenuOpen && (
-                <div className='flex items-center justify-center h-28 border-b border-[#f2f3f4]'>
-                    <PlatformSwitcher />
-                </div>
-            )}
+            <div className='flex items-center justify-center h-28 border-b border-[#f2f3f4]'>
+                <PlatformSwitcher />
+            </div>
 
             <div className='relative h-full pt-4'>
-                {data.map((item, index) => (
-                    <div className='pl-[4.8rem] pr-[1.6rem] border-b border-[#f2f3f4]' key={index}>
-                        {item.map(({ LeftComponent, RightComponent, as, href, label, onClick, submenu }) => {
-                            const textSize = isMobile ? 'md' : 'sm';
+                {MobileMenuConfig().map((item, index) => {
+                    const removeBorderBottom = item.find(({ removeBorderBottom }) => removeBorderBottom);
 
-                            if (as === 'a') {
+                    return (
+                        <div
+                            className={clsx('pl-[4.8rem] pr-[1.6rem]', {
+                                'border-b border-[#f2f3f4]': !removeBorderBottom,
+                            })}
+                            key={index}
+                        >
+                            {item.map(({ LeftComponent, RightComponent, as, href, label, onClick, target }) => {
+                                if (as === 'a') {
+                                    return (
+                                        <MenuItem
+                                            as='a'
+                                            className='h-[5.6rem]'
+                                            disableHover
+                                            href={href}
+                                            key={label}
+                                            leftComponent={
+                                                <LeftComponent className='mr-[1.6rem]' height={16} width={16} />
+                                            }
+                                            target={target}
+                                        >
+                                            <Text size={textSize}>{label}</Text>
+                                        </MenuItem>
+                                    );
+                                }
                                 return (
                                     <MenuItem
-                                        as='a'
-                                        className='h-[5.6rem]'
+                                        as='button'
+                                        className='w-full h-[5.6rem]'
                                         disableHover
-                                        href={href}
                                         key={label}
-                                        leftComponent={<LeftComponent className='mr-[1.6rem]' height={16} width={16} />}
+                                        leftComponent={<LeftComponent className='mr-[1.6rem]' iconSize='xs' />}
+                                        onClick={onClick}
+                                        rightComponent={RightComponent}
                                     >
-                                        <Text size={textSize}>{label}</Text>
+                                        <Text className='mr-auto' size={textSize}>
+                                            {label}
+                                        </Text>
                                     </MenuItem>
                                 );
-                            }
-                            return (
-                                <MenuItem
-                                    as='button'
-                                    className='w-full h-[5.6rem]'
-                                    disableHover
-                                    key={label}
-                                    leftComponent={<LeftComponent className='mr-[1.6rem]' iconSize='xs' />}
-                                    onClick={() => {
-                                        if (submenu) {
-                                            setRenderSubmenuFor(submenu);
-                                            setIsSubmenuOpen(true);
-                                        } else onClick?.();
-                                    }}
-                                    rightComponent={RightComponent}
-                                >
-                                    <Text className='mr-auto' size={textSize}>
-                                        {label}
-                                    </Text>
-                                </MenuItem>
-                            );
-                        })}
-                    </div>
-                ))}
-
-                <Submenu className='overflow-y-auto z-10' isOpen={isSubmenuOpen}>
-                    <SubmenuContent onBackClick={() => setIsSubmenuOpen(false)} renderContentFor={renderSubmenuFor} />
-                </Submenu>
+                            })}
+                        </div>
+                    );
+                })}
             </div>
         </div>
     );