structure + sidebar
This commit is contained in:
hamid zarghami
@@ -0,0 +1,135 @@
|
||||
import { FC } from 'react'
|
||||
import LogoImage from '../assets/images/logo.svg'
|
||||
import { Add, ArchiveTick, DirectInbox, DirectSend, Edit, InfoCircle, Logout, Setting2, Star, Trash } from 'iconsax-react'
|
||||
import SideBarItem from './SideBarItem'
|
||||
import { useLocation } from 'react-router-dom'
|
||||
import { useSharedStore } from './store/sharedStore'
|
||||
import { clx } from '../helpers/utils'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Paths } from '@/utils/Paths'
|
||||
import Button from '@/components/Button'
|
||||
|
||||
const SideBar: FC = () => {
|
||||
|
||||
const { t } = useTranslation()
|
||||
const { openSidebar, setOpenSidebar } = useSharedStore()
|
||||
const location = useLocation()
|
||||
|
||||
const isActive = (path: string) => location.pathname === path
|
||||
|
||||
const iconSizeSideBar = 20
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-50 z-10' 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',
|
||||
openSidebar && 'opacity-100 visible -translate-x-[0px] block z-40'
|
||||
)}
|
||||
>
|
||||
<div className='flex justify-center'>
|
||||
<img src={LogoImage} className='w-[140px]' />
|
||||
</div>
|
||||
|
||||
<div className='flex justify-center mt-14'>
|
||||
<Button
|
||||
className='bg-secondary font-normal text-primary w-fit px-6'
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<Add size={20} 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'>
|
||||
{t('sidebar.menu')}
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<DirectInbox variant={isActive(Paths.received) ? 'Bold' : 'Outline'} color={isActive(Paths.received) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.received')}
|
||||
isActive={isActive(Paths.received)}
|
||||
link={Paths.received}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<DirectSend variant={isActive(Paths.sent) ? 'Bold' : 'Outline'} color={isActive(Paths.sent) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.sent')}
|
||||
isActive={isActive(Paths.sent)}
|
||||
link={Paths.sent}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Edit variant={isActive(Paths.draft) ? 'Bold' : 'Outline'} color={isActive(Paths.draft) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.draft')}
|
||||
isActive={isActive(Paths.draft)}
|
||||
link={Paths.draft}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<ArchiveTick variant={isActive(Paths.archive) ? 'Bold' : 'Outline'} color={isActive(Paths.archive) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.archive')}
|
||||
isActive={isActive(Paths.archive)}
|
||||
link={Paths.archive}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<Trash variant={isActive(Paths.trash) ? 'Bold' : 'Outline'} color={isActive(Paths.trash) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.trash')}
|
||||
isActive={isActive(Paths.trash)}
|
||||
link={Paths.trash}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-10 px-12 text-[#C3C7DD] text-sm font-bold'>
|
||||
{t('sidebar.other')}
|
||||
</div>
|
||||
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Star variant={isActive(Paths.favorite) ? 'Bold' : 'Outline'} color={isActive(Paths.favorite) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.favorite')}
|
||||
isActive={isActive(Paths.favorite)}
|
||||
link={Paths.favorite}
|
||||
/>
|
||||
|
||||
<SideBarItem
|
||||
icon={<InfoCircle variant={isActive(Paths.spam) ? 'Bold' : 'Outline'} color={isActive(Paths.spam) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.spam')}
|
||||
isActive={isActive(Paths.spam)}
|
||||
link={Paths.spam}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='flex-1 flex flex-col justify-end mt-14 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} />}
|
||||
title={t('sidebar.setting')}
|
||||
isActive={isActive(Paths.setting)}
|
||||
link={Paths.setting}
|
||||
/>
|
||||
</div>
|
||||
<div className='text-xs text-[#8C90A3]'>
|
||||
<SideBarItem
|
||||
icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
|
||||
title={t('sidebar.logout')}
|
||||
isActive={isActive('logout')}
|
||||
link={`#`}
|
||||
isLogout
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default SideBar
|
||||
Reference in New Issue
Block a user