danak/shop-front
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-09-03 15:06:15 +03:30
parent 138f26e293
commit d051e7110a
33 changed files with 440 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/profile/components/Menu.tsx
+38 -12
View File
@@ -11,21 +11,47 @@ const Menu: FC<Props> = (props) => {
const { pageActive } = props
return (
<div className='h-20 flex justify-between items-center bg-[#FAFAFA] rounded-[10px] border border-border px-10'>
<div className='flex gap-10'>
<MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
<MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
<MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
<MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} />
<MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
<div className='bg-[#FAFAFA] rounded-[10px] border border-border'>
{/* Mobile Layout */}
<div className='block sm:hidden'>
<div className='flex overflow-x-auto scrollbar-hide p-3'>
<div className='flex gap-2 min-w-max'>
<MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
<MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
<MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
<MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} />
<MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
{/* Logout Button in Mobile */}
<div className='flex-shrink-0 ml-2'>
<Button className='bg-[#F2F2F2] h-12 px-3'>
<div className='flex items-center gap-2 text-[#AD3434]'>
<LogoutCurve className='size-4' color='#AD3434' />
<div className='text-xs font-light'>خروج</div>
</div>
</Button>
</div>
</div>
</div>
</div>
<Button className='bg-[#F2F2F2] h-12'>
<div className='flex itesm-center gap-2 text-[#AD3434]'>
<LogoutCurve className='min-size-5 size-5' color='#AD3434' />
<div className='text-sm font-light'>خروج از حساب</div>
{/* Desktop Layout */}
<div className='hidden sm:flex h-20 justify-between items-center px-6 lg:px-10'>
<div className='flex gap-4 lg:gap-6 xl:gap-10'>
<MenuItem href='/profile' icon='user' text='پروفایل کاربری' isActive={pageActive === 'profile'} />
<MenuItem href='/profile/favorite' icon='heart' text='علاقه مندی ها' isActive={pageActive === 'favorite'} />
<MenuItem href='/profile/comments' icon='comment' text='نظرات من' isActive={pageActive === 'comments'} />
<MenuItem href='/profile/chat' icon='chat' text='گفتگو' isActive={pageActive === 'chat'} />
<MenuItem href='/profile/orders' icon='orders' text='سفارشات' isActive={pageActive === 'orders'} />
</div>
</Button>
<Button className='bg-[#F2F2F2] h-12'>
<div className='flex items-center gap-2 text-[#AD3434]'>
<LogoutCurve className='size-5' color='#AD3434' />
<div className='text-sm font-light'>خروج از حساب</div>
</div>
</Button>
</div>
</div>
)
}