danak-console/src/shared/SideBar.tsx

import { FC } from 'react'
import LogoImage from '../assets/images/logo.svg'
import { useTranslation } from 'react-i18next'
import { Card, DocumentText, Element3, Element4, Home2, Logout, Messages3, NotificationStatus, Receipt21, Setting2, Teacher } from 'iconsax-react'
import SideBarItem from './SideBarItem'
import { useLocation } from 'react-router-dom'
import { Pages } from '../config/Pages'
import { useSharedStore } from './store/sharedStore'
import { clx } from '../helpers/utils'

const SideBar: FC = () => {

    const { t } = useTranslation('global')
    const { openSidebar, setOpenSidebar } = useSharedStore()
    const location = useLocation()

    const isActive = (name: string) => {
        return location.pathname.includes(name)
    }

    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 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-1 h-full overflow-y-auto no-scrollbar'>
                    <div className='mt-10 px-12 text-header text-sm font-normal'>
                        {t('sidebar.menu')}
                    </div>

                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<Home2 variant={isActive('dashboard') ? 'Bold' : 'Outline'} color={isActive('dashboard') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.mainpage')}
                            isActive={isActive('dashboard')}
                            link={Pages.dashboard}
                        />
                        <SideBarItem
                            icon={<Element4 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.myservice')}
                            isActive={isActive('services')}
                            link={Pages.services.mine}
                        />
                        <SideBarItem
                            icon={<Element3 variant={isActive('other-service') ? 'Bold' : 'Outline'} color={isActive('other-service') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.other_service')}
                            isActive={isActive('other-service')}
                            link={Pages.services.other}
                        />
                        <SideBarItem
                            icon={<Receipt21 variant={isActive('receipts') ? 'Bold' : 'Outline'} color={isActive('receipts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.receipt_list')}
                            isActive={isActive('receipts')}
                            link={Pages.receipts.index}
                        />
                        <SideBarItem
                            icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.transactions')}
                            isActive={isActive('transactions')}
                            link={Pages.transactions}
                        />
                    </div>

                    <div className='mt-10 px-12 text-header text-sm font-normal'>
                        {t('sidebar.other')}
                    </div>

                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<Messages3 variant={isActive('tickets') ? 'Bold' : 'Outline'} color={isActive('tickets') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.ticket')}
                            isActive={isActive('tickets')}
                            link={Pages.ticket.list}
                        />
                    </div>
                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<NotificationStatus variant={isActive('announcement') ? 'Bold' : 'Outline'} color={isActive('announcement') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.announcement')}
                            isActive={isActive('announcement')}
                            link={Pages.announcement.list}
                        />
                    </div>
                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<DocumentText variant={isActive('criticisms') ? 'Bold' : 'Outline'} color={isActive('criticisms') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.criticisms')}
                            isActive={isActive('criticisms')}
                            link={Pages.criticisms}
                        />
                    </div>
                    <div className='text-xs text-[#8C90A3]'>
                        <SideBarItem
                            icon={<Teacher variant={isActive('learning') ? 'Bold' : 'Outline'} color={isActive('learning') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                            title={t('sidebar.learning')}
                            isActive={isActive('learning')}
                            link={Pages.learning.list}
                        />
                    </div>

                    <div className='flex-1 items-end mt-14'>
                        <div className='text-xs text-[#8C90A3]'>
                            <SideBarItem
                                icon={<Setting2 variant={isActive('setting') ? 'Bold' : 'Outline'} color={isActive('setting') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                                title={t('sidebar.setting')}
                                isActive={isActive('setting')}
                                link={Pages.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