base structure

2025-11-12 11:45:13 +03:30
parent d9560b7d32
commit d36b8e40f0
26 changed files with 1083 additions and 8 deletions
@@ -0,0 +1,110 @@
+import { type FC, useEffect } from 'react'
+import LogoImage from '../assets/images/logo.svg'
+import LogoSmall from '../assets/images/logo-small.svg'
+import { useTranslation } from 'react-i18next'
+import {
+    Home2,
+    Logout,
+} from 'iconsax-react'
+import SideBarItem from './SideBarItem'
+import { useLocation } from 'react-router-dom'
+import { useSharedStore } from './store/sharedStore'
+import { clx } from '../helpers/utils'
+import { Paths } from '../config/Paths'
+
+
+const SideBar: FC = () => {
+
+    const { t } = useTranslation('global')
+    const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
+    const location = useLocation()
+
+    const isActive = (name: string) => {
+        return window.location.href.includes(name)
+    }
+
+    useEffect(() => {
+        const split = location.pathname.split('/')
+
+        if (split[1] === 'dashboard' || split[1] === 'products') {
+            setSubMenuName(split[1])
+            setSubtMenu(true)
+        } else {
+            setSubMenuName('')
+            setSubtMenu(false)
+        }
+    }, [location.pathname, setSubMenuName, setSubtMenu])
+
+    const iconSizeSideBar = 20
+
+    return (
+        <>
+            {
+                openSidebar && <div className='fixed top-0 left-0 right-0 bottom-0 bg-black/50 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',
+                    hasSubMenu && 'w-24 !rounded-tl-none !rounded-bl-none'
+                )}
+            >
+                <div className='flex justify-center'>
+                    {
+                        !hasSubMenu ?
+                            <img src={LogoImage} className='w-[140px]' />
+                            :
+                            <img src={LogoSmall} className='w-7' />
+                    }
+                </div>
+
+                <div className='flex-1 flex flex-col h-full overflow-y-auto no-scrollbar'>
+                    <div className={clx(
+                        'mt-10 px-12 text-header text-sm font-normal',
+                        hasSubMenu && 'px-2 text-center'
+                    )}>
+                        {t('sidebar.menu')}
+                    </div>
+
+                    <div className='text-xs text-[#8C90A3]'>
+                        <SideBarItem
+                            icon={<Home2 variant={isActive(Paths.home) ? 'Bold' : 'Outline'} color={isActive(Paths.home) ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.home_page')}
+                            isActive={isActive(Paths.home)}
+                            link={Paths.home}
+                            activeName={Paths.home}
+                        />
+                    </div>
+
+                    <div className='flex-1 flex flex-col justify-end mt-14'>
+                        <div className='text-xs text-[#8C90A3]'>
+                            <SideBarItem
+                                icon={<Logout variant={isActive('logout') ? 'Bold' : 'Outline'} color={isActive('logout') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                title="خروج"
+                                isActive={isActive('logout')}
+                                link={`#`}
+                                isLogout
+                                activeName=''
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            {/* منوی فرعی */}
+            {
+                hasSubMenu && (openSidebar || window.innerWidth > 1139) &&
+                <div className='fixed  xl:right-[112px] right-[96px] bg-white z-20 xl:top-4 xl:bottom-4 top-0 bottom-0 rounded-tl-[32px] rounded-bl-[32px] w-[190px] border-r border-border'>
+                    {
+                        subMenuName === 'dashboard' ? null
+                            // <DashboardSubMenu />
+                            : null
+                    }
+                </div>
+            }
+        </>
+    )
+}
+
+
+export default SideBar