File size: 1,554 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 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import { useState, useRef } from 'react'
import Collapse from '@/components/Collapse'
import { MenuList } from './MenuList'
import Logo from './Logo'
import SearchInput from './SearchInput'
/**
* 顶部导航
* @param {*} param0
* @returns
*/
const TopNav = props => {
const [isOpen, changeShow] = useState(false)
const collapseRef = useRef(null)
const toggleMenuOpen = () => {
changeShow(!isOpen)
}
return (<div id='top-nav' className='z-40 block lg:hidden'>
{/* 导航栏 */}
<div id='sticky-nav' className={'relative w-full top-0 z-20 transform duration-500 bg-white dark:bg-black'}>
<Collapse type='vertical' isOpen={isOpen} collapseRef={collapseRef}>
<div className='py-1 px-5'>
<MenuList {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
<SearchInput {...props} />
</div>
</Collapse>
<div className='w-full flex justify-between items-center p-4 '>
{/* 左侧LOGO 标题 */}
<div className='flex flex-none flex-grow-0'>
<Logo {...props} />
</div>
<div className='flex'>
</div>
{/* 右侧功能 */}
<div className='mr-1 flex justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
<div onClick={toggleMenuOpen} className='cursor-pointer text-lg p-2'>
{isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
</div>
</div>
</div>
</div>
</div>)
}
export default TopNav
|