File size: 1,214 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
import { Router } from 'next/router'
import { useImperativeHandle, useRef } from 'react'
import SearchInput from './SearchInput'
const SearchDrawer = ({ cRef, slot }) => {
const searchDrawer = useRef()
const searchInputRef = useRef()
useImperativeHandle(cRef, () => {
return {
show: () => {
searchDrawer?.current?.classList?.remove('hidden')
searchInputRef?.current?.focus()
}
}
})
const hidden = () => {
searchDrawer?.current?.classList?.add('hidden')
}
Router.events.on('routeChangeComplete', (...args) => {
hidden()
})
return (
<div id='search-drawer-wrapper' ref={searchDrawer} className='hidden'>
<div className='flex-col fixed px-5 w-full left-0 top-14 z-40 justify-center'>
<div className='md:max-w-3xl w-full mx-auto animate__animated animate__faster animate__fadeIn'>
<SearchInput cRef={searchInputRef} />
{slot}
</div>
</div>
{/* θζ―θη */}
<div id='search-drawer-background' onClick={hidden} className='animate__animated animate__faster animate__fadeIn fixed bg-day dark:bg-night top-0 left-0 z-30 w-full h-full' />
</div>
)
}
export default SearchDrawer
|