base compare

src/share/Header.tsx

@@ -10,7 +10,7 @@ const Header: FC = () => {
 
     return (
         <Fragment>
-            <div className='fixed top-0 bg-white w-full z-[9998] border-b border-gray-100 max-w-full overflow-hidden'>
+            <div className='fixed top-0 bg-white w-full z-[9998] border-b border-gray-100 max-w-full'>
                 {/* بخش بالایی هدر */}
                 <div className='flex items-center justify-between px-3 sm:px-4 md:px-6 py-3 sm:py-4'>
                     {/* منوی همبرگری موبایل */}

src/share/components/Menu.tsx

@@ -9,6 +9,7 @@ import { Category } from '../types/SharedTypes'
 const Menu: FC = () => {
     const [isOpen, setIsOpen] = useState(false)
     const [hoveredPath, setHoveredPath] = useState<Category[]>([])
+    const [menuPosition, setMenuPosition] = useState({ top: 0, right: 0 })
     const { data, isLoading } = useGetCategories()
     const menuRef = useRef<HTMLDivElement>(null)
     const router = useRouter()
@@ -25,6 +26,16 @@ const Menu: FC = () => {
         return () => document.removeEventListener('mousedown', handleClickOutside)
     }, [])
 
+    useEffect(() => {
+        if (isOpen && menuRef.current) {
+            const rect = menuRef.current.getBoundingClientRect()
+            setMenuPosition({
+                top: rect.bottom + window.scrollY + 8,
+                right: window.innerWidth - rect.right - window.scrollX
+            })
+        }
+    }, [isOpen])
+
     const parentCategories = data?.results?.data?.filter(cat => !cat.parent) || []
 
     const handleCategoryHover = (category: Category, level: number) => {
@@ -86,7 +97,11 @@ const Menu: FC = () => {
 
             {isOpen && (
                 <div
-                    className='absolute top-full right-0 mt-2 bg-white rounded-xl shadow-lg border border-gray-200 z-[9999] flex max-w-[90vw] md:max-w-none max-h-screen overflow-hidden'
+                    className='fixed bg-white rounded-xl shadow-lg border border-gray-200 z-[9999] flex max-w-[90vw] md:max-w-none max-h-[80vh] overflow-hidden'
+                    style={{
+                        top: `${menuPosition.top}px`,
+                        right: `${menuPosition.right}px`
+                    }}
                     onMouseLeave={() => {
                         setIsOpen(false)
                         setHoveredPath([])