feat: adjust mobile layout
This commit is contained in:
@@ -14,10 +14,29 @@ interface MobileHeaderProps {
|
||||
const MobileHeader = ({ showBackButton = false }: MobileHeaderProps) => {
|
||||
const { siteName } = useSite();
|
||||
return (
|
||||
<header className='md:hidden relative w-full bg-white/70 backdrop-blur-xl border-b border-gray-200/50 shadow-sm dark:bg-gray-900/70 dark:border-gray-700/50'>
|
||||
<header className='md:hidden fixed top-0 left-0 right-0 z-[999] w-full bg-white/70 backdrop-blur-xl border-b border-gray-200/50 shadow-sm dark:bg-gray-900/70 dark:border-gray-700/50'>
|
||||
<div className='h-12 flex items-center justify-between px-4'>
|
||||
{/* 左侧:返回按钮和设置按钮 */}
|
||||
{/* 左侧:搜索按钮、返回按钮和设置按钮 */}
|
||||
<div className='flex items-center gap-2'>
|
||||
<Link
|
||||
href='/search'
|
||||
className='w-10 h-10 p-2 rounded-full flex items-center justify-center text-gray-600 hover:bg-gray-200/50 dark:text-gray-300 dark:hover:bg-gray-700/50 transition-colors'
|
||||
>
|
||||
<svg
|
||||
className='w-full h-full'
|
||||
fill='none'
|
||||
stroke='currentColor'
|
||||
viewBox='0 0 24 24'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<path
|
||||
strokeLinecap='round'
|
||||
strokeLinejoin='round'
|
||||
strokeWidth={2}
|
||||
d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'
|
||||
/>
|
||||
</svg>
|
||||
</Link>
|
||||
{showBackButton && <BackButton />}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user