admin panel

2025-07-08 12:43:22 +03:30
parent fed1933ec4
commit e019641d59
110 changed files with 13274 additions and 0 deletions
@@ -0,0 +1,95 @@
+import { FC } from 'react'
+import LogoImage from '../assets/images/logo.svg'
+import { Brush2, Global, Logout, PenClose, People, Setting3 } 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'
+
+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/50 z-20' onClick={() => setOpenSidebar(false)} />
+            }
+            <div
+                className={clx(
+                    'fixed xl:flex flex 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] flex z-40'
+                )}
+            >
+                <div className='flex justify-center px-4'>
+                    <img src={LogoImage} className='w-[120px] md:w-[140px]' />
+                </div>
+
+                <div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar min-h-0'>
+                    {/* <div className='mt-8 md:mt-10 px-8 md:px-12 text-[#C3C7DD] text-sm font-bold'>
+                        {t('setting.title')}
+                    </div> */}
+
+                    <div className='text-xs text-[#8C90A3] mt-14'>
+                        <SideBarItem
+                            icon={<Setting3 variant={isActive(Paths.settingMailServer) ? 'Bold' : 'Outline'} color={isActive(Paths.settingMailServer) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('setting.mail_server')}
+                            isActive={isActive(Paths.settingMailServer)}
+                            link={Paths.settingMailServer}
+                        />
+
+                        <SideBarItem
+                            icon={<Global variant={isActive(Paths.settingDomain) ? 'Bold' : 'Outline'} color={isActive(Paths.settingDomain) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('setting.domain')}
+                            isActive={isActive(Paths.settingDomain)}
+                            link={Paths.settingDomain}
+                        />
+
+                        <SideBarItem
+                            icon={<People variant={isActive(Paths.settingAddress) ? 'Bold' : 'Outline'} color={isActive(Paths.settingAddress) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('setting.address')}
+                            isActive={isActive(Paths.settingAddress)}
+                            link={Paths.settingAddress}
+                        />
+
+                        <SideBarItem
+                            icon={<Brush2 variant={isActive(Paths.settingPersonality) ? 'Bold' : 'Outline'} color={isActive(Paths.settingPersonality) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('setting.personality')}
+                            isActive={isActive(Paths.settingPersonality)}
+                            link={Paths.settingPersonality}
+                        />
+
+                        <SideBarItem
+                            icon={<PenClose variant={isActive(Paths.settingSignature) ? 'Bold' : 'Outline'} color={isActive(Paths.settingSignature) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('setting.signature')}
+                            isActive={isActive(Paths.settingSignature)}
+                            link={Paths.settingSignature}
+                        />
+                    </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={<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