responsive part 2

src/components/RadioGroup.tsx

@@ -13,7 +13,7 @@ type Props = {
 
 const RadioGroup: FC<Props> = (props: Props) => {
     return (
-        <div className='flex gap-5 items-center text-xs'>
+        <div className='flex justify-between xl:justify-start gap-5 items-center text-xs'>
             {
                 props.items.map((item, index) => (
                     <div key={index} className='flex gap-2 items-center'>

src/components/Table.tsx

@@ -160,7 +160,7 @@ const Table = <T extends RowDataType>({
         <div className={`relative mt-6 md:mt-9 w-full ${className}`}>
             {(actionsPosition === 'top' || actionsPosition === 'above-header') && renderActions()}
 
-            <div className="overflow-x-auto overflow-hidden rounded-2xl md:rounded-3xl bg-white shadow-sm">
+            <div className={`overflow-x-auto overflow-hidden ${showHeader && actionsPosition !== 'header-replace' ? 'rounded-2xl md:rounded-3xl' : 'rounded-b-2xl md:rounded-b-3xl'} bg-white shadow-sm`}>
                 <table className="w-full text-sm border-collapse min-w-[600px]">
                     {renderHeader()}
                     {actionsPosition === 'header-replace' && (

src/index.css

@@ -213,3 +213,17 @@ textarea::placeholder {
 .dltr {
   direction: ltr;
 }
+
+/* Start Generation Here */
+/* Hide scrollbar for all elements */
+* {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+}
+
+/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
+*::-webkit-scrollbar {
+  display: none;
+}
+
+/* End Generation Here */

src/langs/fa.json

@@ -133,7 +133,7 @@
   "mail": {
     "download": "دانلود",
     "print": "چاپ",
-    "subject": "موضوع : ",
+    "subject": "موضوع: ",
     "attachments": "فایل های ضمیمه",
     "answer": "پاسخ",
     "forward": "ارسال به دیگران",

src/pages/received/Components/Header.tsx

@@ -9,14 +9,14 @@ const Header: FC = () => {
 
     return (
         <div className='flex justify-between items-center border-b border-border pb-6'>
-            <div className='flex gap-6'>
+            <div className='flex xl:gap-6 gap-4'>
                 <ArrowRight size={24} color='#8C90A3' />
-                <SmsNotification size={24} color='black' />
+                <SmsNotification size={24} color='black' className='xl:block hidden' />
-                <ArchiveTick size={24} color='black' />
+                <ArchiveTick size={24} color='black' className='xl:block hidden' />
-                <InfoCircle size={24} color='black' />
+                <InfoCircle size={24} color='black' className='xl:block hidden' />
-                <Star size={24} color='black' />
+                <Star size={24} color='black' className='xl:block hidden' />
-                <VolumeMute size={24} color='black' />
+                <VolumeMute size={24} color='black' className='xl:block hidden' />
-                <Trash size={24} color='#CD0000' />
+                <Trash size={24} color='#CD0000' className='xl:block hidden' />
                 <More size={24} color='black' className='rotate-90' />
             </div>
 
@@ -24,17 +24,17 @@ const Header: FC = () => {
                 <Button
                     variant='secondary'
                 >
-                    <div className='flex gap-2 items-center px-5'>
+                    <div className='flex gap-2 items-center xl:px-5'>
                         <DocumentDownload size={20} color='black' />
-                        <span className='pt-0.5'>{t('mail.download')}</span>
+                        <span className='pt-0.5 xl:block hidden'>{t('mail.download')}</span>
                     </div>
                 </Button>
                 <Button
                     variant='secondary'
                 >
-                    <div className='flex gap-2 items-center px-5'>
+                    <div className='flex gap-2 items-center xl:px-5'>
                         <Printer size={20} color='black' />
-                        <span className='pt-0.5'>{t('mail.print')}</span>
+                        <span className='pt-0.5 xl:block hidden'>{t('mail.print')}</span>
                     </div>
                 </Button>
             </div>

src/pages/received/Detail.tsx

@@ -19,23 +19,25 @@ const DetailEmail: FC = () => {
         <div className='bg-white rounded-4xl p-8'>
             <Header />
 
-            <div className='mt-6 flex justify-between items-center'>
+            <div className='mt-6 flex xl:flex-row flex-col justify-between xl:items-center'>
-                <div className='flex gap-4 items-center'>
+                <div className='flex xl:flex-row flex-col-reverse gap-4 xl:items-center'>
                     <div className='flex gap-1 items-center'>
-                        <div className='font-extralight '>{t('mail.subject')}</div>
+                        <div className='font-extralight hidden xl:block'>{t('mail.subject')}</div>
-                        <div>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</div>
+                        <div className='leading-7'>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ</div>
+                    </div>
+                    <div className='flex gap-2'>
+                        <Button
+                            label='دریافتی ها'
+                            className='bg-[#ECEFF6] text-description w-fit px-6 rounded-full h-6 xl:h-10 text-[10px] xl:text-sm'
+                        />
+                        <Button
+                            label='الویت زیاد'
+                            className='bg-[#FFE9E9] text-[#CD0000] w-fit px-6 rounded-full h-6 xl:h-10 text-[10px] xl:text-sm'
+                        />
                     </div>
-                    <Button
-                        label='دریافتی ها'
-                        className='bg-[#ECEFF6] text-description w-fit px-6 rounded-full'
-                    />
-                    <Button
-                        label='الویت زیاد'
-                        className='bg-[#FFE9E9] text-[#CD0000] w-fit px-6 rounded-full'
-                    />
                 </div>
 
-                <div className='flex text-description text-sm'>
+                <div className='flex justify-end text-description xl:text-sm text-[10px]'>
                     ۵ اسفندماه ۱۴۰۳، ساعت ۱۲:۰۰
                 </div>
             </div>
@@ -45,7 +47,7 @@ const DetailEmail: FC = () => {
                 <div>مهرداد مظفری</div>
             </div>
 
-            <p className='mt-8 text-sm leading-7 font-light'>
+            <p className='xl:mt-8 mt-3 text-sm leading-7 font-light'>
                 لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آیندهلورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد کتابهای زیادی در شصت و سه درصد گذشته حال و آینده
             </p>
 

src/pages/setting/Setting.tsx

@@ -26,8 +26,8 @@ const Setting: FC = () => {
                 return <Signture />;
             case SettingTabEnum.SETTING_PERSONALITY:
                 return (
-                    <div className='flex flex-col xl:flex-row-reverse gap-4 md:gap-6 mt-6 md:mt-8'>
+                    <div className='flex  xl:flex-row-reverse gap-2 md:gap-6 mt-6 md:mt-8'>
-                        <div className="xl:w-auto w-full">
+                        <div className="xl:w-auto">
                             <PersonalitySidebar />
                         </div>
                         <div className="flex-1">

src/pages/setting/address/Address.tsx

@@ -81,9 +81,9 @@ const Address: FC = () => {
     ]
 
     return (
-        <div className='flex gap-8 mt-8'>
+        <div className='flex xl:flex-row flex-col-reverse gap-8 mt-8'>
             <div className='flex-1'>
-                <div className='flex justify-between'>
+                <div className='flex gap-2 justify-between'>
                     <div>
                         <Select
                             placeholder={t('setting.status')}
@@ -92,11 +92,11 @@ const Address: FC = () => {
                         />
                     </div>
 
-                    <div>
+                    <div className='flex-1'>
                         <Input
                             variant='search'
                             placeholder={t('setting.search')}
-                            className='w-[300px]'
+                            className='xl:w-[300px] flex-1'
                         />
                     </div>
                 </div>
@@ -112,7 +112,7 @@ const Address: FC = () => {
                 />
             </div>
 
-            <div className='w-[350px] bg-white rounded-4xl p-8'>
+            <div className='xl:w-[350px] w-full bg-white rounded-4xl p-8'>
                 <div>
                     {t('setting.add_address')}
                 </div>

src/pages/setting/domain/Domain.tsx

@@ -106,12 +106,12 @@ const Domain: FC = () => {
 
   return (
     <div>
-      <div className='flex justify-between mt-9'>
+      <div className='flex xl:flex-row gap-4 flex-col justify-between mt-9'>
         <div>
-          <div className='text-lg'>
+          <div className='xl:text-lg'>
             {t('setting.record_dns')}
           </div>
-          <p className='mt-2 text-sm font-extralight'>
+          <p className='mt-2 xl:text-sm text-xs font-extralight'>
             {t('setting.record_dns_description')}
           </p>
         </div>
@@ -119,12 +119,12 @@ const Domain: FC = () => {
         <div className='flex gap-2'>
           <Input
             placeholder={t('setting.your_domain')}
-            className='w-[300px]'
+            className='xl:w-[300px]'
           />
 
           <Button
             variant='secondary'
-            className='w-fit px-14 border border-black'
+            className='w-fit xl:px-14 px-8 border border-black'
             label={t('setting.submit')}
           />
         </div>

src/pages/setting/enum/SettingEnum.ts

@@ -11,4 +11,5 @@ export enum SideBarTab {
   TEXT = "text",
   BUTTON = "button",
   IMAGE = "image",
+  NONE = "none",
 }

src/pages/setting/mail-server/MailServer.tsx

@@ -7,13 +7,13 @@ const Domain: FC = () => {
     const { t } = useTranslation()
     return (
         <div className='bg-white rounded-4xl p-8 mt-9'>
-            <div className=''>
+            <div>
-                <div className='flex justify-between items-end border-b pb-10 broder-border'>
+                <div className='flex xl:flex-row gap-4 flex-col justify-between xl:items-end border-b pb-10 broder-border'>
                     <div className='flex-1'>
-                        <div className='text-lg'>
+                        <div className='xl:text-lg'>
                             {t('setting.setting_fetch')}
                         </div>
-                        <div className='text-sm text-description mt-1.5'>
+                        <div className='xl:text-sm text-xs text-description mt-1.5'>
                             {t('setting.setting_fetch_description')}
                         </div>
                     </div>
@@ -40,12 +40,12 @@ const Domain: FC = () => {
                 </div>
             </div>
             <div className='mt-9'>
-                <div className='flex justify-between items-start pb-10'>
+                <div className='flex xl:flex-row gap-4 flex-col justify-between  xl:items-end pb-10'>
                     <div className='flex-1'>
-                        <div className='text-lg'>
+                        <div className='xl:text-lg'>
                             {t('setting.setting_smtp')}
                         </div>
-                        <div className='text-sm text-description mt-1.5'>
+                        <div className='xl:text-sm text-xs text-description mt-1.5'>
                             {t('setting.setting_smtp_description')}
                         </div>
                     </div>

src/pages/setting/personality/SideBar.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, useState, useRef, useEffect } from 'react'
 import { Gallery, LinkSquare, Setting4, Text } from 'iconsax-react'
 import Logo from '@/assets/images/logo-small.svg'
 import SettingSideBar from './components/SettingSideBar'
@@ -6,28 +6,54 @@ import { SideBarTab } from '../enum/SettingEnum'
 import TextSidebar from './components/TextSidebar'
 import ButtonSidebar from './components/ButtonSidebar'
 import ImageSideBar from './components/ImageSideBar'
+import { clx } from '@/helpers/utils'
 
 const PersonalitySidebar: FC = () => {
 
     const [active, setActive] = useState<SideBarTab>(SideBarTab.SETTING)
+    const sidebarRef = useRef<HTMLDivElement>(null)
+
+    useEffect(() => {
+        const handleClickOutside = (event: MouseEvent) => {
+            // فقط در موبایل (عرض کمتر از 1280px) کار کند
+            if (window.innerWidth < 1280 && sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
+                setActive(SideBarTab.NONE)
+            }
+        }
+
+        if (active !== SideBarTab.NONE) {
+            document.addEventListener('mousedown', handleClickOutside)
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside)
+        }
+    }, [active])
 
     return (
-        <div className='bg-white rounded-3xl w-[360px] flex'>
+        <div ref={sidebarRef} className={clx(
-            <div className='flex-1 p-6'>
+            'bg-white  xl:rounded-4xl  xl:overflow-hidden xl:w-[360px] flex h-full sticky top-0',
+            active === SideBarTab.NONE ? 'rounded-4xl' : 'rounded-r-4xl'
+        )}>
+            {active !== SideBarTab.NONE && (
+                <div className='absolute rounded-l-4xl shadow-[-2px_0_4px_-1px_rgba(0,0,0,0.05)] xl:shadow-none xl:static bg-white right-10 h-full z-10 xl:w-[360px] w-[250px] p-6 overflow-y-auto'>
+                    {
+                        active === SideBarTab.SETTING ? <SettingSideBar />
+                            : active === SideBarTab.TEXT ? <TextSidebar />
+                                : active === SideBarTab.BUTTON ? <ButtonSidebar />
+                                    : active === SideBarTab.IMAGE ? <ImageSideBar />
+                                        : null
+                    }
+                </div>
+            )}
+            <div className='xl:w-20 xl:border-r py-5 border-gray-200 w-10 flex flex-col items-center pt-6 pb-6 h-full'>
                 {
-                    active === SideBarTab.SETTING ? <SettingSideBar />
+                    active !== SideBarTab.NONE && <img src={Logo} className='w-8' alt="Logo" />
-                        : active === SideBarTab.TEXT ? <TextSidebar />
-                            : active === SideBarTab.BUTTON ? <ButtonSidebar />
-                                : active === SideBarTab.IMAGE ? <ImageSideBar />
-                                    : null
                 }
-
+                <div className={clx(
-
+                    'flex flex-col gap-10 mt-16',
-
+                    active === SideBarTab.NONE && 'mt-4'
-            </div>
+                )}>
-            <div className='w-20 border-r border-gray-200 flex flex-col items-center pt-6 pb-6'>
-                <img src={Logo} className='w-8' alt="Logo" />
-                <div className='flex flex-col gap-10 mt-16'>
                     <Setting4 size={22} color='black' variant={SideBarTab.SETTING === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.SETTING)} className='cursor-pointer' />
                     <Text size={22} color='black' variant={SideBarTab.TEXT === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.TEXT)} className='cursor-pointer' />
                     <LinkSquare size={22} color='black' variant={SideBarTab.BUTTON === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.BUTTON)} className='cursor-pointer' />

src/pages/setting/signture/Signture.tsx

@@ -9,21 +9,21 @@ const Signture: FC = () => {
     return (
         <div className='bg-white rounded-4xl p-8 mt-9'>
             <div className='mt-9'>
-                <div className='flex justify-between items-start pb-10'>
+                <div className='flex xl:flex-row gap-4 flex-col justify-between xl:items-end pb-10'>
                     <div className='flex-1'>
-                        <div className='text-lg'>
+                        <div className='xl:text-lg'>
                             {t('setting.signature')}
                         </div>
-                        <div className='text-sm text-description mt-1.5'>
+                        <div className='xl:text-sm text-xs text-description mt-1.5'>
                             {t('setting.signature_description')}
                         </div>
                     </div>
 
-                    <div className='flex-1'>
+                    <div className='flex-1 mt-5 xl:mt-0'>
                         <UploadBox
                             label={t('setting.upload_sign')}
                         />
-                        <div className='mt-8'>
+                        <div className='xl:mt-8'>
                             <Textarea
                                 label={t('setting.description_sign')}
                             />