danak/help
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive

Browse Source
This commit is contained in:
hamid zarghami
2025-08-20 12:15:05 +03:30
parent d4eda49cd3
commit 54a31386a5
3 changed files with 99 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/Home/Home.tsx
+1 -1
View File
@@ -49,7 +49,7 @@ const Home: FC = () => {
<div className='p-8 flex gap-8'> <div className='p-8 flex gap-8'>
<Sidebar guides={guides} service={service} /> <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-1'>
<div className='flex gap-3 items-center mb-8'> <div className='flex gap-3 items-center mb-8'>
src/Pages/Home/components/Sidebar.tsx
+98 -24
View File
@@ -1,4 +1,5 @@
import { type FC, useState, useEffect } from 'react' import { type FC, useState, useEffect } from 'react'
import { Menu, CloseSquare } from 'iconsax-reactjs'
interface Service { interface Service {
id: string; id: string;
@@ -24,6 +25,7 @@ interface SidebarProps {
const Sidebar: FC<SidebarProps> = ({ guides }) => { const Sidebar: FC<SidebarProps> = ({ guides }) => {
const [activeGuideId, setActiveGuideId] = useState<string>('') const [activeGuideId, setActiveGuideId] = useState<string>('')
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
useEffect(() => { useEffect(() => {
const handleScroll = () => { const handleScroll = () => {
@@ -80,37 +82,109 @@ const Sidebar: FC<SidebarProps> = ({ guides }) => {
// تنظیم active state // تنظیم active state
setActiveGuideId(guideId) setActiveGuideId(guideId)
// بستن منوی موبایل
setIsMobileMenuOpen(false)
} }
} }
const toggleMobileMenu = () => {
setIsMobileMenuOpen(!isMobileMenuOpen)
}
return ( return (
<div className='bg-white top-8 bottom-8 fixed p-8 w-[280px] rounded-4xl right-8 flex flex-col'> <>
<div className='font-bold'> {/* دسکتاپ 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>
<div className='mt-10 flex flex-col gap-8 overflow-y-auto flex-1 pr-2'>
{guides.length > 0 ? (
guides.map((guide) => (
<div
key={guide.id}
className={`border-r-[3px] pr-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-3 text-[#616474] text-sm'>
{guide.description}
</div>
</div>
))
) : null}
</div>
</div> </div>
<div className='mt-10 flex flex-col gap-8 overflow-y-auto flex-1 pr-2'> {/* موبایل Floating Button */}
{guides.length > 0 ? ( <div className='lg:hidden fixed bottom-6 left-6 z-50'>
guides.map((guide) => ( <button
<div onClick={toggleMobileMenu}
key={guide.id} className='bg-black text-white p-4 rounded-full shadow-lg hover:bg-gray-800 transition-colors duration-200'
className={`border-r-[3px] pr-4 cursor-pointer transition-all duration-300 ${activeGuideId === guide.id >
? 'border-black' <Menu size={24} />
: 'border-[#A8ABBF]' </button>
}`}
onClick={() => handleGuideClick(guide.id)}
>
<div className='text-sm font-bold'>
{guide.title}
</div>
<div className='mt-3 text-[#616474] text-sm'>
{guide.description}
</div>
</div>
))
) : null}
</div> </div>
</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
-3
View File
@@ -2,7 +2,6 @@
html { html {
direction: rtl; direction: rtl;
overflow: hidden;
max-width: 100%; max-width: 100%;
} }
@@ -12,10 +11,8 @@ body {
padding: 0; padding: 0;
width: 100%; width: 100%;
direction: rtl; direction: rtl;
overflow: hidden !important;
background: #eceef6; background: #eceef6;
font-weight: 300; font-weight: 300;
overflow: hidden;
font-feature-settings: "lnum"; /* اطمینان از نمایش اعداد انگلیسی */ font-feature-settings: "lnum"; /* اطمینان از نمایش اعداد انگلیسی */
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;