danak/dmail-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

reponsive and selective actions and row actioin + pagination

Browse Source
This commit is contained in:
hamid zarghami
2025-06-17 20:52:40 +03:30
parent 71fd53c810
commit 4c869c42c6
24 changed files with 869 additions and 287 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/shared/SideBar.tsx
+15 -12
View File
@@ -23,32 +23,35 @@ const SideBar: FC = () => {
return (
<>
{
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-10' onClick={() => setOpenSidebar(false)} />
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 z-20' onClick={() => setOpenSidebar(false)} />
}
<div
className={clx(
'fixed xl:flex flex-1 translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100 xl:right-4 right-0 xl:top-4 top-0 xl:bottom-4 bottom-0 xl:rounded-[32px] w-[250px] bg-white flex-col py-12',
'fixed xl:flex flex-1 translate-x-[400px] xl:translate-x-0 transition-all ease-in-out opacity-0 invisible xl:visible xl:opacity-100 xl:right-2 xl:md:right-4 right-0 xl:top-2 xl:md:top-4 top-0 xl:bottom-2 xl:md:bottom-4 bottom-0 xl:rounded-[20px] xl:md:rounded-[32px] w-[250px] sm:w-[280px] xl:w-[250px] bg-white flex-col py-8 md:py-10 xl:py-12',
openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
)}
>
<div className='flex justify-center'>
<img src={LogoImage} className='w-[140px]' />
<div className='flex justify-center px-4'>
<img src={LogoImage} className='w-[120px] md:w-[140px]' />
</div>
<div className='flex justify-center mt-14'>
<div className='flex justify-center mt-10 md:mt-14 px-4'>
<Button
className='bg-secondary font-normal text-primary w-fit px-6'
onClick={() => setOpenNewMessage(true)}
className='bg-secondary font-normal text-primary w-fit px-4 md:px-6 text-sm'
onClick={() => {
setOpenSidebar(false)
setOpenNewMessage(true)
}}
>
<div className='flex gap-2'>
<Add size={20} color='black' />
<div className='flex gap-2 items-center'>
<Add size={18} color='black' />
<div>{t('sidebar.new_message')}</div>
</div>
</Button>
</div>
<div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
<div className='mt-10 px-12 text-[#C3C7DD] text-sm font-bold'>
<div className='mt-8 md:mt-10 px-8 md:px-12 text-[#C3C7DD] text-sm font-bold'>
{t('sidebar.menu')}
</div>
@@ -89,7 +92,7 @@ const SideBar: FC = () => {
/>
</div>
<div className='mt-10 px-12 text-[#C3C7DD] text-sm font-bold'>
<div className='mt-8 md:mt-10 px-8 md:px-12 text-[#C3C7DD] text-sm font-bold'>
{t('sidebar.other')}
</div>
@@ -109,7 +112,7 @@ const SideBar: FC = () => {
/>
</div>
<div className='flex-1 flex flex-col justify-end mt-14 pb-8'>
<div className='flex-1 flex flex-col justify-end mt-10 md:mt-14 pb-6 md:pb-8'>
<div className='text-xs text-[#8C90A3]'>
<SideBarItem
icon={<Setting2 variant={isActive(Paths.setting) ? 'Bold' : 'Outline'} color={isActive(Paths.setting) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}