danak/shop-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsive base v1

Browse Source
This commit is contained in:
hamid zarghami
2025-09-02 12:42:13 +03:30
parent c6b3aa0682
commit 2fa9ab1bbb
27 changed files with 581 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/share/Header.tsx
+76 -14
View File
@@ -1,47 +1,109 @@
'use client'
import Input from '@/components/Input'
import { Separator } from '@/components/ui/separator'
import { DocumentText, Home, Profile, ShoppingCart } from 'iconsax-react'
import { FC, Fragment } from 'react'
import { DocumentText, Home, Profile, ShoppingCart, HambergerMenu } from 'iconsax-react'
import { FC, Fragment, useState } from 'react'
import Menu from './components/Menu'
const Header: FC = () => {
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
return (
<Fragment>
<div className='fixed top-0 bg-white w-full z-[9998] pb-4'>
<div className='flex items-center justify-between px-6 py-[18px]'>
<div className='flex gap-[30px] items-center'>
<div>LOGO</div>
<Input className='w-[500px]' variant='search' placeholder='جستجو' />
<div className='fixed top-0 bg-white w-full z-[9998] border-b border-gray-100 max-w-full overflow-hidden'>
{/* بخش بالایی هدر */}
<div className='flex items-center justify-between px-3 sm:px-4 md:px-6 py-3 sm:py-4'>
{/* منوی همبرگری موبایل */}
<div className='md:hidden'>
<button
onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
className='p-2 rounded-lg hover:bg-gray-50'
>
<HambergerMenu size={24} color='#333333' />
</button>
</div>
<div className='flex items-center gap-6'>
<div className='h-10 border border-border py-3 px-4 rounded-[12px] flex items-center gap-2.5'>
<div className='flex gap-2 sm:gap-4 md:gap-[30px] items-center flex-1 md:flex-none'>
<div className='text-base sm:text-lg font-bold text-purple-600'>LOGO</div>
<Input
className='hidden md:block w-[300px] lg:w-[500px]'
variant='search'
placeholder='جستجو'
/>
</div>
<div className='flex items-center gap-1 sm:gap-2 md:gap-6'>
<div className='hidden md:flex h-10 border border-border py-3 px-4 rounded-[12px] items-center gap-2.5'>
<Profile size={20} color='#333333' />
<div className='text-sm text-[#333333]'>حساب کاربری</div>
</div>
<Separator style={{ height: 25 }} orientation='vertical' />
<div className='md:hidden'>
<Profile size={24} color='#333333' />
</div>
<Separator className='hidden md:block' style={{ height: 25 }} orientation='vertical' />
<div className='h-10 p-3 rounded-[12px] border border-border flex items-center gap-2.5'>
<ShoppingCart size={20} color='#333333' />
</div>
</div>
</div>
<div className='mt-7 text-sm px-6 flex items-center gap-7'>
{/* نوار جستجو موبایل */}
<div className='md:hidden px-3 sm:px-4 pb-3 sm:pb-4'>
<Input
className='w-full'
variant='search'
placeholder='جستجو'
/>
</div>
{/* بخش پایینی هدر - فقط دسکتاپ */}
<div className='hidden md:flex mt-2 text-sm px-6 pb-4 items-center gap-7'>
<Menu />
<Separator style={{ height: 20 }} orientation='vertical' />
<div className='flex items-center gap-2.5'>
<div className='flex items-center gap-2.5 cursor-pointer hover:text-purple-600 transition-colors'>
<Home size={20} color='#333333' />
<div className='text-[#333333]'>صفحه نخست</div>
</div>
<div className='flex items-center gap-2.5'>
<div className='flex items-center gap-2.5 cursor-pointer hover:text-purple-600 transition-colors'>
<DocumentText size={20} color='#333333' />
<div className='text-[#333333]'>مجله</div>
</div>
</div>
{/* منوی موبایل */}
{isMobileMenuOpen && (
<div className='md:hidden bg-white border-t border-gray-100'>
<div className='px-4 py-4 space-y-4'>
<div className='flex items-center gap-3 py-3 border-b border-gray-100'>
<Profile size={20} color='#333333' />
<span className='text-sm text-gray-800'>حساب کاربری</span>
</div>
<div className='space-y-3'>
<div className='flex items-center gap-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg px-2'>
<Home size={20} color='#333333' />
<span className='text-sm text-gray-800'>صفحه نخست</span>
</div>
<div className='flex items-center gap-3 py-2 cursor-pointer hover:bg-gray-50 rounded-lg px-2'>
<DocumentText size={20} color='#333333' />
<span className='text-sm text-gray-800'>مجله</span>
</div>
</div>
<div className='pt-4 border-t border-gray-100'>
<Menu />
</div>
</div>
</div>
)}
</div>
<div className='h-[140px]'></div>
{/* فضای خالی برای جبران ارتفاع fixed header */}
<div className={`${isMobileMenuOpen ? 'h-[280px] sm:h-[260px] md:h-[140px]' : 'h-[100px] sm:h-[120px] md:h-[140px]'}`}></div>
</Fragment>
)
}