d0zingcat/NotionNext
1
0
Fork 0
mirror of https://github.com/d0zingcat/NotionNext.git synced 2026-05-29 15:10:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

gitbook 改版

Browse Source
This commit is contained in:
tangly1024.com
2024-09-24 11:39:18 +08:00
parent d94344c14a
commit fd4e96506b
13 changed files with 130 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
themes/gitbook/components/Header.js
View File

@@ -7,6 +7,7 @@ import CONFIG from '../config'
import LogoBar from './LogoBar'
import { MenuBarMobile } from './MenuBarMobile'
import { MenuItemDrop } from './MenuItemDrop'
import SearchInput from './SearchInput'
/**
* 页头：顶部导航栏 + 菜单
@@ -60,6 +61,43 @@ export default function Header(props) {
return (
<div id='top-nav' className={'fixed top-0 w-full z-20 ' + className}>
{/* PC端菜单 */}
<div className='flex justify-center border-b items-center w-full h-14 glassmorphism bg-white dark:bg-hexo-black-gray px-7'>
<div className='max-w-screen-4xl w-full flex gap-x-3 justify-between items-center'>
{/* 左侧*/}
<div className='flex'>
<LogoBar {...props} />
{/* 桌面端顶部菜单 */}
<div className='hidden md:flex'>
{links &&
links?.map((link, index) => (
<MenuItemDrop key={index} link={link} />
))}
</div>
</div>
{/* 右侧 */}
<div className='flex items-center gap-3'>
<SearchInput className='hidden md:flex md:w-52 lg:w-72' />
<DarkModeButton className='text-sm items-center h-full hidden md:flex' />
{/* 折叠按钮、仅移动端显示 */}
<div className='mr-1 flex md:hidden justify-end items-center space-x-4 dark:text-gray-200'>
<DarkModeButton className='flex text-md items-center h-full' />
<div
onClick={toggleMenuOpen}
className='cursor-pointer text-lg hover:scale-110 duration-150'>
{isOpen ? (
<i className='fas fa-times' />
) : (
<i className='fa-solid fa-bars' />
)}
</div>
</div>
</div>
</div>
</div>
{/* 移动端折叠菜单 */}
<Collapse
type='vertical'
@@ -75,35 +113,6 @@ export default function Header(props) {
/>
</div>
</Collapse>
{/* 导航栏菜单 */}
<div className='flex w-full h-14 shadow glassmorphism bg-white dark:bg-hexo-black-gray px-7 items-between'>
{/* 左侧图标Logo */}
<LogoBar {...props} />
{/* 折叠按钮、仅移动端显示 */}
<div className='mr-1 flex md:hidden justify-end items-center space-x-4 dark:text-gray-200'>
<DarkModeButton className='flex text-md items-center h-full' />
<div
onClick={toggleMenuOpen}
className='cursor-pointer text-lg hover:scale-110 duration-150'>
{isOpen ? (
<i className='fas fa-times' />
) : (
<i className='fa-solid fa-bars' />
)}
</div>
</div>
{/* 桌面端顶部菜单 */}
<div className='hidden md:flex'>
{links &&
links?.map((link, index) => (
<MenuItemDrop key={index} link={link} />
))}
<DarkModeButton className='text-sm flex items-center h-full' />
</div>
</div>
</div>
)
}