sidebar

2024-12-25 18:09:15 +03:30
parent 6d5ce71b2f
commit 75d71e11fb
10 changed files with 233 additions and 4 deletions
@@ -0,0 +1,124 @@
+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'
+
+const SideBar: FC = () => {
+
+    const { t } = useTranslation('global')
+    const location = useLocation()
+
+    const isActive = (name: string) => {
+        return location.pathname.includes(name)
+    }
+
+    const iconSizeSideBar = 20
+
+    return (
+        <div className='fixed right-4 top-4 bottom-4 rounded-[32px] w-[250px] bg-white flex flex-col py-12'>
+            <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={<Element3 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={<Element4 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}
+                    />
+                    <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}
+                    />
+                </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}
+                    />
+                </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={`#`}
+                        />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default SideBar