Skip to content

Commit

Permalink
chore: commented unnecessary parts
Browse files Browse the repository at this point in the history
  • Loading branch information
@niloofar-deriv
niloofar-deriv committed Jun 14, 2024
1 parent dc7a4c7 commit e0fb451
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 77 deletions.
88 changes: 42 additions & 46 deletions src/components/AppHeader/MobileMenu/MenuContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,23 @@
import { useState } from 'react';
import clsx from 'clsx';
import { MenuItem, Submenu, Text, useDevice } from '@deriv-com/ui';
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 [isSubmenuOpen, setIsSubmenuOpen] = useState(false);
// const [renderSubmenuFor, setRenderSubmenuFor] = useState<TSubmenuSection>('accountSettings');
const { isMobile } = useDevice();
const textSize = isMobile ? 'md' : 'sm';

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>
)}
{/* {!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) => {
Expand All @@ -32,54 +30,52 @@ export const MenuContent = () => {
})}
key={index}
>
{item.map(
({ LeftComponent, RightComponent, as, href, label, onClick, submenu, 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>
);
}
{item.map(({ LeftComponent, RightComponent, as, href, label, target }) => {
if (as === 'a') {
return (
<MenuItem
as='button'
className='w-full h-[5.6rem]'
as='a'
className='h-[5.6rem]'
disableHover
href={href}
key={label}
leftComponent={<LeftComponent className='mr-[1.6rem]' iconSize='xs' />}
onClick={() => {
if (submenu) {
setRenderSubmenuFor(submenu);
setIsSubmenuOpen(true);
} else onClick?.();
}}
rightComponent={RightComponent}
leftComponent={
<LeftComponent className='mr-[1.6rem]' height={16} width={16} />
}
target={target}
>
<Text className='mr-auto' size={textSize}>
{label}
</Text>
<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}>
{/* <Submenu className='overflow-y-auto z-10' isOpen={isSubmenuOpen}>
<SubmenuContent onBackClick={() => setIsSubmenuOpen(false)} renderContentFor={renderSubmenuFor} />
</Submenu>
</Submenu> */}
</div>
</div>
);
Expand Down
63 changes: 32 additions & 31 deletions src/components/AppHeader/MobileMenu/SubmenuContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,42 +1,43 @@
import { ComponentProps } from 'react';
import { IconTypes } from '@deriv/quill-icons';
import { Text, useDevice } from '@deriv-com/ui';
import { BackButton } from './BackButton';
import { MobileMenuConfig, TSubmenuSection } from './MobileMenuConfig';
// import { ComponentProps } from 'react';
// import { IconTypes } from '@deriv/quill-icons';
// import { Text, useDevice } from '@deriv-com/ui';
// import { BackButton } from './BackButton';
// import { MobileMenuConfig, TSubmenuSection } from './MobileMenuConfig';

type TSubmenuContent = {
onBackClick: () => void;
renderContentFor: TSubmenuSection;
};
// type TSubmenuContent = {
// onBackClick: () => void;
// renderContentFor: TSubmenuSection;
// };

type TMenuItem = {
Icon: IconTypes;
fontWeight: ComponentProps<typeof Text>['weight'];
label: string;
};
// type TMenuItem = {
// Icon: IconTypes;
// fontWeight: ComponentProps<typeof Text>['weight'];
// label: string;
// };

const MenuItem = ({ Icon, fontWeight, label }: TMenuItem) => {
const { isMobile } = useDevice();
// const MenuItem = ({ Icon, fontWeight, label }: TMenuItem) => {
// const { isMobile } = useDevice();

return (
<>
<Icon iconSize='xs' />
<Text className='ml-[1.6rem]' size={isMobile ? 'md' : 'sm'} weight={fontWeight}>
{label}
</Text>
</>
);
};
// return (
// <>
// <Icon iconSize='xs' />
// <Text className='ml-[1.6rem]' size={isMobile ? 'md' : 'sm'} weight={fontWeight}>
// {label}
// </Text>
// </>
// );
// };

export const SubmenuContent = ({ onBackClick, renderContentFor }: TSubmenuContent) => {
const data = MobileMenuConfig().submenuConfig[renderContentFor];
const { isMobile } = useDevice();
// export const SubmenuContent = ({ onBackClick, renderContentFor }: TSubmenuContent) => {
export const SubmenuContent = () => {
// const data = MobileMenuConfig().submenuConfig[renderContentFor];
// const { isMobile } = useDevice();

return (
<div className='pb-14'>
<BackButton buttonText={data.title} onClick={onBackClick} />
{/* <BackButton buttonText={data.title} onClick={onBackClick} /> */}

<ul className='pl-[4.8rem] pr-[1.6rem]'>
{/* <ul className='pl-[4.8rem] pr-[1.6rem]'>
{data.items.map(({ Icon, href, label, subItems }) => {
const hasSubItems = subItems?.length;
Expand Down Expand Up @@ -67,7 +68,7 @@ export const SubmenuContent = ({ onBackClick, renderContentFor }: TSubmenuConten
</li>
);
})}
</ul>
</ul> */}
</div>
);
};

0 comments on commit e0fb451

Please sign in to comment.