responsive

src/Pages/Home/Home.tsx

@@ -49,7 +49,7 @@ const Home: FC = () => {
         <div className='p-8 flex gap-8'>
             <Sidebar guides={guides} service={service} />
 
-            <div className='w-[280px]'></div>
+            <div className='w-[280px] hidden lg:block'></div>
 
             <div className='flex-1'>
                 <div className='flex gap-3 items-center mb-8'>

src/Pages/Home/components/Sidebar.tsx

@@ -1,4 +1,5 @@
 import { type FC, useState, useEffect } from 'react'
+import { Menu, CloseSquare } from 'iconsax-reactjs'
 
 interface Service {
     id: string;
@@ -24,6 +25,7 @@ interface SidebarProps {
 
 const Sidebar: FC<SidebarProps> = ({ guides }) => {
     const [activeGuideId, setActiveGuideId] = useState<string>('')
+    const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
 
     useEffect(() => {
         const handleScroll = () => {
@@ -80,11 +82,20 @@ const Sidebar: FC<SidebarProps> = ({ guides }) => {
 
             // تنظیم active state
             setActiveGuideId(guideId)
+
+            // بستن منوی موبایل
+            setIsMobileMenuOpen(false)
         }
     }
 
+    const toggleMobileMenu = () => {
+        setIsMobileMenuOpen(!isMobileMenuOpen)
+    }
+
     return (
-        <div className='bg-white top-8 bottom-8 fixed p-8 w-[280px] rounded-4xl right-8 flex flex-col'>
+        <>
+            {/* دسکتاپ Sidebar */}
+            <div className='hidden lg:block bg-white top-8 bottom-8 fixed p-8 w-[280px] rounded-4xl right-8 flex flex-col'>
                 <div className='font-bold'>
                     لیست محتوا
                 </div>
@@ -111,6 +122,69 @@ const Sidebar: FC<SidebarProps> = ({ guides }) => {
                     ) : null}
                 </div>
             </div>
+
+            {/* موبایل Floating Button */}
+            <div className='lg:hidden fixed bottom-6 left-6 z-50'>
+                <button
+                    onClick={toggleMobileMenu}
+                    className='bg-black text-white p-4 rounded-full shadow-lg hover:bg-gray-800 transition-colors duration-200'
+                >
+                    <Menu size={24} />
+                </button>
+            </div>
+
+            {/* موبایل Drawer */}
+            {isMobileMenuOpen && (
+                <div className='lg:hidden fixed inset-0 z-40'>
+                    {/* Backdrop */}
+                    <div
+                        className='absolute inset-0 bg-black bg-opacity-50'
+                        onClick={toggleMobileMenu}
+                    />
+
+                    {/* Drawer */}
+                    <div className='absolute bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 max-h-[80vh] overflow-hidden'>
+                        {/* Header */}
+                        <div className='flex items-center justify-between mb-6'>
+                            <h3 className='text-lg font-bold'>لیست محتوا</h3>
+                            <button
+                                onClick={toggleMobileMenu}
+                                className='p-2 hover:bg-gray-100 rounded-full transition-colors duration-200'
+                            >
+                                <CloseSquare size={20} />
+                            </button>
+                        </div>
+
+                        {/* Content */}
+                        <div className='overflow-y-auto max-h-[60vh] pr-2'>
+                            {guides.length > 0 ? (
+                                guides.map((guide) => (
+                                    <div
+                                        key={guide.id}
+                                        className={`border-r-[3px] pr-4 py-4 cursor-pointer transition-all duration-300 ${activeGuideId === guide.id
+                                            ? 'border-black'
+                                            : 'border-[#A8ABBF]'
+                                            }`}
+                                        onClick={() => handleGuideClick(guide.id)}
+                                    >
+                                        <div className='text-sm font-bold'>
+                                            {guide.title}
+                                        </div>
+                                        <div className='mt-2 text-[#616474] text-sm'>
+                                            {guide.description}
+                                        </div>
+                                    </div>
+                                ))
+                            ) : (
+                                <div className='text-center text-gray-500 py-8'>
+                                    محتوایی برای نمایش وجود ندارد
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
     )
 }
 

src/index.css

@@ -2,7 +2,6 @@
 
 html {
   direction: rtl;
-  overflow: hidden;
   max-width: 100%;
 }
 
@@ -12,10 +11,8 @@ body {
   padding: 0;
   width: 100%;
   direction: rtl;
-  overflow: hidden !important;
   background: #eceef6;
   font-weight: 300;
-  overflow: hidden;
   font-feature-settings: "lnum"; /* اطمینان از نمایش اعداد انگلیسی */
   user-select: none;
   -webkit-user-select: none;