Merge pull request #125 from niloofar-deriv/drawer

Niloofar/SideMenu base component

Author: ameerul-deriv

package-lock.json

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

package.json

@@ -2,7 +2,7 @@
     height: 3.6rem;
     display: flex;
     flex-direction: row-reverse;
-    padding: 0 10px;
+    padding: 0 1rem;
     align-items: center;
     position: fixed;
     bottom: 0;
@@ -14,6 +14,10 @@
 
     &__icon {
         padding: 0.8rem;
+
+        @include mobile {
+            padding: 0;
+        }
     }
 
     &__vertical-line {
@@ -49,6 +53,10 @@
         &-blinking {
             animation: blink 1s infinite alternate;
         }
+
+        @include mobile {
+            margin-left: 1.2rem;
+        }
     }
 
     &__endpoint {

src/components/AppFooter/AppFooter.scss

@@ -1,12 +1,13 @@
 import { DATE_TIME_FORMAT_WITH_GMT, DATE_TIME_FORMAT_WITH_OFFSET } from '@/constants';
 import { useSyncedTime } from '@/hooks';
 import { epochToLocal, epochToUTC } from '@/utils';
-import { Text, TooltipMenuIcon } from '@deriv-com/ui';
+import { Text, TooltipMenuIcon, useDevice } from '@deriv-com/ui';
 
 const ServerTime = () => {
     const time = useSyncedTime();
     const UTCFormat = epochToUTC(time, DATE_TIME_FORMAT_WITH_GMT);
     const localFormat = epochToLocal(time, DATE_TIME_FORMAT_WITH_OFFSET);
+    const { isMobile } = useDevice();
 
     return (
         <TooltipMenuIcon
@@ -16,7 +17,7 @@ const ServerTime = () => {
             disableHover
             tooltipContent={localFormat}
         >
-            <Text size='xs'>{UTCFormat}</Text>
+            <Text size={isMobile ? 'sm' : 'xs'}>{UTCFormat}</Text>
         </TooltipMenuIcon>
     );
 };

src/components/AppFooter/ServerTime.tsx

@@ -23,7 +23,7 @@ const AppHeader = () => {
             <Wrapper variant='left'>
                 <AppLogo />
                 <MobileMenu />
-                <PlatformSwitcher />
+                {isDesktop && <PlatformSwitcher />}
                 <MenuItems />
             </Wrapper>
             <Wrapper variant='right'>

src/components/AppHeader/AppHeader.tsx

@@ -0,0 +1,21 @@
+import { LegacyChevronLeft1pxIcon } from '@deriv/quill-icons';
+import { Text, useDevice } from '@deriv-com/ui';
+
+type TBackButton = {
+    buttonText: string;
+    onClick: () => void;
+};
+
+export const BackButton = ({ buttonText, onClick }: TBackButton) => {
+    const { isMobile } = useDevice();
+
+    return (
+        <button className='flex items-center w-full pt-8 p-[3.2rem]' onClick={onClick}>
+            <LegacyChevronLeft1pxIcon iconSize='xs' />
+
+            <Text className='ml-[1.6rem]' size={isMobile ? 'lg' : 'md'} weight='bold'>
+                {buttonText}
+            </Text>
+        </button>
+    );
+};

src/components/AppHeader/MobileMenu/BackButton.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { MenuItem, Submenu, Text, useDevice } from '@deriv-com/ui';
+import { PlatformSwitcher } from '../PlatformSwitcher';
+import { MobileMenuConfig, TSubmenuSection } from './MobileMenuConfig';
+import { SubmenuContent } from './SubmenuContent';
+
+export const MenuContent = () => {
+    const [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
+    const [renderSubmenuFor, setRenderSubmenuFor] = useState<TSubmenuSection>('accountSettings');
+    const { isMobile } = useDevice();
+
+    const data = MobileMenuConfig().menuConfig;
+
+    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='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';
+
+                            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} />}
+                                    >
+                                        <Text 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>
+    );
+};

src/components/AppHeader/MobileMenu/MenuContent.tsx

@@ -0,0 +1,36 @@
+import { ComponentProps, useMemo } from 'react';
+import { LANGUAGES } from '@/constants';
+import { useTranslations } from '@deriv-com/translations';
+import { Text, useDevice } from '@deriv-com/ui';
+
+type TMenuHeader = {
+    hideLanguageSetting: boolean;
+    openLanguageSetting: ComponentProps<'button'>['onClick'];
+};
+
+export const MenuHeader = ({ hideLanguageSetting, openLanguageSetting }: TMenuHeader) => {
+    const { currentLang, localize } = useTranslations();
+    const { isMobile } = useDevice();
+
+    const countryIcon = useMemo(
+        () => LANGUAGES.find(({ code }) => code === currentLang)?.placeholderIconInMobile,
+        [currentLang]
+    );
+
+    return (
+        <div className='flex items-center justify-between w-full pr-[1.6rem] pl-[0.4rem]'>
+            <Text size={isMobile ? 'lg' : 'md'} weight='bold'>
+                {localize('Menu')}
+            </Text>
+
+            {!hideLanguageSetting && (
+                <button className='flex items-center' onClick={openLanguageSetting}>
+                    {countryIcon}
+                    <Text className='ml-[0.4rem]' size={isMobile ? 'sm' : 'xs'} weight='bold'>
+                        {currentLang}
+                    </Text>
+                </button>
+            )}
+        </div>
+    );
+};