responsive part 2

src/pages/setting/personality/SideBar.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+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'
@@ -6,28 +6,54 @@ 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 className='bg-white rounded-3xl w-[360px] flex'>
-            <div className='flex-1 p-6'>
+        <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.SETTING ? <SettingSideBar />
-                        : active === SideBarTab.TEXT ? <TextSidebar />
-                            : active === SideBarTab.BUTTON ? <ButtonSidebar />
-                                : active === SideBarTab.IMAGE ? <ImageSideBar />
-                                    : null
+                    active !== SideBarTab.NONE && <img src={Logo} className='w-8' alt="Logo" />
                 }
-
-
-
-            </div>
-            <div className='w-20 border-r border-gray-200 flex flex-col items-center pt-6 pb-6'>
-                <img src={Logo} className='w-8' alt="Logo" />
-                <div className='flex flex-col gap-10 mt-16'>
+                <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' />