structure + layout header sidebar

2025-10-14 13:06:18 +03:30
commit 31967a2ecb
53 changed files with 6362 additions and 0 deletions
@@ -0,0 +1,121 @@
+import { type FC } from 'react'
+import LogoImage from '@/assets/images/logo.svg'
+import { DocumentText, Element3, Home2, Logout, Messages3, NotificationStatus, Receipt21, Teacher } from 'iconsax-react'
+import SideBarItem from './SidebarItem'
+import { useLocation } from 'react-router-dom'
+import { Paths } from '../config/Paths'
+import { useSharedStore } from './store/useSharedStore'
+import { clx } from '../helpers/utils'
+import { t } from '../locale'
+
+const SideBar: FC = () => {
+
+    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='px-6'>
+                    <div className='flex border-b-2 border-border pb-14'>
+                        <img src={LogoImage} className='w-[120px]' />
+                    </div>
+                </div>
+
+                <div className='flex-1 h-full overflow-y-auto no-scrollbar px-6'>
+                    <div className='mt-10 text-description px-6 text-header text-sm font-bold'>
+                        {t('sidebar.menu')}
+                    </div>
+
+                    <div className='mt-3'>
+                        <SideBarItem
+                            icon={<Home2 size={iconSizeSideBar} color='#4F5260' />}
+                            title={t('sidebar.mainPage')}
+                            isActive={isActive('/home')}
+                            link={Paths.home}
+                        />
+
+                        <SideBarItem
+                            icon={<Element3 size={iconSizeSideBar} color='#4F5260' />}
+                            title={t('sidebar.myOrders')}
+                            isActive={isActive('/my-orders')}
+                            link={Paths.myOrders}
+                        />
+
+                        <SideBarItem
+                            icon={<Receipt21 size={iconSizeSideBar} color='#4F5260' />}
+                            title={t('sidebar.preFactors')}
+                            isActive={isActive('/pre-factors')}
+                            link={Paths.preFactors}
+                        />
+
+                    </div>
+
+                    <div className='mt-10 px-6 text-description text-sm font-bold'>
+                        {t('sidebar.other')}
+                    </div>
+
+                    <div className='mt-3'>
+                        <SideBarItem
+                            icon={<Messages3 size={iconSizeSideBar} color='#4F5260' />}
+                            title={t('sidebar.tickets')}
+                            isActive={isActive('/tickets')}
+                            link={Paths.tickets.list}
+                        />
+
+                        <SideBarItem
+                            icon={<NotificationStatus size={iconSizeSideBar} color='#4F5260' />}
+                            title={t('sidebar.announcement')}
+                            isActive={isActive('/announcement')}
+                            link={Paths.announcement.list}
+                        />
+
+                        <SideBarItem
+                            icon={<DocumentText size={iconSizeSideBar} color='#4F5260' />}
+                            title={t('sidebar.criticisms')}
+                            isActive={isActive('/criticisms')}
+                            link={Paths.criticisms}
+                        />
+
+                        <SideBarItem
+                            icon={<Teacher size={iconSizeSideBar} color='#4F5260' />}
+                            title={t('sidebar.learning')}
+                            isActive={isActive('/learning')}
+                            link={Paths.learning}
+                        />
+                    </div>
+
+
+                    <div className='flex-1 items-end mt-14 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