dmail-front/src/shared/SideBar.tsx

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 { setOpenNewMessage } = useSharedStore()

    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/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-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 px-4'>
                    <img src={LogoImage} className='w-[120px] md:w-[140px]' />
                </div>

                <div className='flex justify-center mt-10 md:mt-14 px-4'>
                    <Button
                        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 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-8 md:mt-10 px-8 md: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-8 md:mt-10 px-8 md: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-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} />}
                                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