hamid zarghami
67 lines
3.4 KiB
TypeScript
67 lines
3.4 KiB
TypeScript
import { FC, useState, useRef, useEffect } from 'react'
|
|
import { Gallery, LinkSquare, Setting4, Text } from 'iconsax-react'
|
|
import Logo from '@/assets/images/logo-small.svg'
|
|
import SettingSideBar from './components/SettingSideBar'
|
|
import { SideBarTab } from '../enum/SettingEnum'
|
|
import TextSidebar from './components/TextSidebar'
|
|
import ButtonSidebar from './components/ButtonSidebar'
|
|
import ImageSideBar from './components/ImageSideBar'
|
|
import { clx } from '@/helpers/utils'
|
|
|
|
const PersonalitySidebar: FC = () => {
|
|
|
|
const [active, setActive] = useState<SideBarTab>(SideBarTab.SETTING)
|
|
const sidebarRef = useRef<HTMLDivElement>(null)
|
|
|
|
useEffect(() => {
|
|
const handleClickOutside = (event: MouseEvent) => {
|
|
// فقط در موبایل (عرض کمتر از 1280px) کار کند
|
|
if (window.innerWidth < 1280 && sidebarRef.current && !sidebarRef.current.contains(event.target as Node)) {
|
|
setActive(SideBarTab.NONE)
|
|
}
|
|
}
|
|
|
|
if (active !== SideBarTab.NONE) {
|
|
document.addEventListener('mousedown', handleClickOutside)
|
|
}
|
|
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleClickOutside)
|
|
}
|
|
}, [active])
|
|
|
|
return (
|
|
<div ref={sidebarRef} className={clx(
|
|
'bg-white xl:rounded-4xl xl:overflow-hidden xl:w-[360px] flex h-full sticky top-0',
|
|
active === SideBarTab.NONE ? 'rounded-4xl' : 'rounded-r-4xl'
|
|
)}>
|
|
{active !== SideBarTab.NONE && (
|
|
<div className='absolute rounded-l-4xl shadow-[-2px_0_4px_-1px_rgba(0,0,0,0.05)] xl:shadow-none xl:static bg-white right-10 h-full z-10 xl:w-[360px] w-[250px] p-6 overflow-y-auto'>
|
|
{
|
|
active === SideBarTab.SETTING ? <SettingSideBar />
|
|
: active === SideBarTab.TEXT ? <TextSidebar />
|
|
: active === SideBarTab.BUTTON ? <ButtonSidebar />
|
|
: active === SideBarTab.IMAGE ? <ImageSideBar />
|
|
: null
|
|
}
|
|
</div>
|
|
)}
|
|
<div className='xl:w-20 xl:border-r py-5 border-gray-200 w-10 flex flex-col items-center pt-6 pb-6 h-full'>
|
|
{
|
|
active !== SideBarTab.NONE && <img src={Logo} className='w-8' alt="Logo" />
|
|
}
|
|
<div className={clx(
|
|
'flex flex-col gap-10 mt-16',
|
|
active === SideBarTab.NONE && 'mt-4'
|
|
)}>
|
|
<Setting4 size={22} color='black' variant={SideBarTab.SETTING === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.SETTING)} className='cursor-pointer' />
|
|
<Text size={22} color='black' variant={SideBarTab.TEXT === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.TEXT)} className='cursor-pointer' />
|
|
<LinkSquare size={22} color='black' variant={SideBarTab.BUTTON === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.BUTTON)} className='cursor-pointer' />
|
|
<Gallery size={22} color='black' variant={SideBarTab.IMAGE === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.IMAGE)} className='cursor-pointer' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default PersonalitySidebar |