|
|
import { useState, useRef } from 'react' |
|
|
import Collapse from '@/components/Collapse' |
|
|
import { MenuList } from './MenuList' |
|
|
import Logo from './Logo' |
|
|
import SearchInput from './SearchInput' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
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 |
|
|
|
