From 40004b50b3fe99104646680ed11a4e835b877d3e Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Wed, 3 Sep 2025 16:06:41 +0330
Subject: [PATCH] base compare

---
 src/app/compare/page.tsx      | 86 +++++++++++++++++++++++++++++++++++
 src/app/globals.css           | 11 +++++
 src/share/Header.tsx          |  2 +-
 src/share/components/Menu.tsx | 17 ++++++-
 4 files changed, 114 insertions(+), 2 deletions(-)
 create mode 100644 src/app/compare/page.tsx

diff --git a/src/app/compare/page.tsx b/src/app/compare/page.tsx
new file mode 100644
index 0000000..3976dcf
--- /dev/null
+++ b/src/app/compare/page.tsx
@@ -0,0 +1,86 @@
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import Layout from '@/hoc/Layout'
+import { NextPage } from 'next'
+import Image from 'next/image'
+
+const ComparePage: NextPage = () => {
+    return (
+        <Layout>
+            <div className='mt-24 px-20'>
+                <div className='flex border-b border-border'>
+                    <div className='w-[300px] flex flex-col justify-center items-center border-l border-border pb-5'>
+                        <Image
+                            src='https://shinan.storage.iran.liara.space/media-file/30661b3bde87834d3feae30953d5fc63232d78f181e7fed0.png'
+                            alt='compare'
+                            width={150}
+                            height={150}
+                            className='max-w-[100px] max-h-[100px] object-contain'
+                        />
+
+                        <div className='mt-6 font-light text-sm'>
+                            رومیزی سندس کد T-2112 طرح فرش
+                        </div>
+
+                        <div className='mt-8 text-sm font-light'>
+                            260,000 <span className='text-[10px]'>تومان</span>
+                        </div>
+
+                        <div className='mt-5'>
+                            <Button
+                            >
+                                افزودن به سبد
+                            </Button>
+                        </div>
+                    </div>
+                    <div className='w-[300px] flex flex-col justify-center items-center border-l border-border pb-5'>
+                        <Image
+                            src='https://shinan.storage.iran.liara.space/media-file/30661b3bde87834d3feae30953d5fc63232d78f181e7fed0.png'
+                            alt='compare'
+                            width={150}
+                            height={150}
+                            className='max-w-[100px] max-h-[100px] object-contain'
+                        />
+
+                        <div className='mt-6 font-light text-sm'>
+                            رومیزی سندس کد T-2112 طرح فرش
+                        </div>
+
+                        <div className='mt-8 text-sm font-light'>
+                            260,000 <span className='text-[10px]'>تومان</span>
+                        </div>
+
+                        <div className='mt-5'>
+                            <Button
+                            >
+                                افزودن به سبد
+                            </Button>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='mt-8'>
+                    <div className='text-sm font-light'>
+                        مشخصات
+                    </div>
+                </div>
+
+                <div className='mt-9 border-b border-border pb-7'>
+                    <div className='text-[#999999] text-sm'>وزن</div>
+
+                    <div className='flex mt-6 font-light'>
+                        <div className='w-[300px]'>
+                            350 g
+                        </div>
+                        <div className='w-[300px] flex gap-6'>
+                            <Separator orientation='vertical' />
+                            350 g
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </Layout>
+    )
+}
+
+export default ComparePage
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index ba5da47..b3c72ba 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,6 +11,17 @@ body {
   max-width: 100vw;
 }
 
+/* اجازه نمایش منو در دسکتاپ */
+@media (min-width: 768px) {
+  html {
+    overflow-x: auto;
+  }
+
+  body {
+    overflow-x: auto;
+  }
+}
+
 /* اطمینان از عدم overflow در container ها */
 .container,
 .max-w-full {
diff --git a/src/share/Header.tsx b/src/share/Header.tsx
index 234066e..eb5cdfe 100644
--- a/src/share/Header.tsx
+++ b/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'>
                     {/* منوی همبرگری موبایل */}
diff --git a/src/share/components/Menu.tsx b/src/share/components/Menu.tsx
index ae8256a..e0bef72 100644
--- a/src/share/components/Menu.tsx
+++ b/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([])