Skip to content

Commit

Permalink
修复Nav主题移动端的菜单
Browse files Browse the repository at this point in the history
  • Loading branch information
@tangly1024
tangly1024 committed Nov 13, 2024
1 parent c5b6b70 commit 3c29590
Show file tree
Hide file tree
Showing 2 changed files with 82 additions and 56 deletions.
15 changes: 10 additions & 5 deletions themes/nav/components/MenuItemCollapse.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@ export const MenuItemCollapse = props => {
if (!link || !link.show) {
return null
}

// #号加标题 快速跳转到指定锚点
const isAnchor = link?.href === '#'
const url = isAnchor ? `#${link.name}` : link.href
const selected = router.pathname === link.href || router.asPath === link.href

const toggleShow = () => {
Expand All @@ -42,7 +44,7 @@ export const MenuItemCollapse = props => {
onClick={toggleShow}>
{!hasSubMenu && (
<Link
href={link?.href}
href={url}
target={link?.target}
className='py-2 w-full my-auto items-center justify-between flex '>
<div>
Expand Down Expand Up @@ -72,21 +74,24 @@ export const MenuItemCollapse = props => {
{hasSubMenu && (
<Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link?.subMenus?.map((sLink, index) => {
// #号加标题 快速跳转到指定锚点
const sIsAnchor = sLink?.href === '#'
const sUrl = sIsAnchor ? `#${sLink.name}` : sLink.href

return (
<div
key={index}
className='
py-2 px-14 cursor-pointer hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white font-bold
dark:bg-black text-left justify-start text-gray-600 bg-gray-50 bg-opacity-20 dark:hover:bg-gray-600 tracking-widest transition-all duration-200'>
{/* <Link href={sLink.href} target={link?.target}> */}
<a href={`/#${sLink.title}`} target={'_self'}>
<Link href={sUrl} target={'_self'}>
<div>
<div
className={`${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'} text-center w-3 mr-2 text-xs`}
/>
{sLink.title}
</div>
</a>
</Link>
</div>
)
})}
Expand Down
123 changes: 72 additions & 51 deletions themes/nav/components/TopNavBar.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import Collapse from '@/components/Collapse'
import { MenuBarMobile } from './MenuBarMobile'
import throttle from 'lodash.throttle'
import SearchInput from './SearchInput'
import DarkModeButton from '@/components/DarkModeButton'
import throttle from 'lodash.throttle'
import { useCallback, useEffect, useRef, useState } from 'react'
import LogoBar from './LogoBar'
import { MenuBarMobile } from './MenuBarMobile'
import SearchInput from './SearchInput'

/**
* 顶部导航栏 + 菜单
Expand All @@ -29,63 +29,84 @@ export default function TopNavBar(props) {

const throttleMs = 200

const scrollTrigger = useCallback(throttle(() => {
const scrollS = window.scrollY
const nav = document.querySelector('#nav-bg')
// const header = document.querySelector('#top-nav')
const header = document.querySelector('#container-inner')
const showNav = scrollS <= windowTop || scrollS < 5 || (scrollS <= header.clientHeight)// 非首页无大图时影藏顶部 滚动条置顶时隐藏
if (!showNav) {
nav && nav.classList.replace('-top-20', 'top-0')
windowTop = scrollS
} else {
nav && nav.classList.replace('top-0', '-top-20')
windowTop = scrollS
}
}, throttleMs)
const scrollTrigger = useCallback(
throttle(() => {
const scrollS = window.scrollY
const nav = document.querySelector('#nav-bg')
// const header = document.querySelector('#top-nav')
const header = document.querySelector('#container-inner')
const showNav =
scrollS <= windowTop || scrollS < 5 || scrollS <= header.clientHeight // 非首页无大图时影藏顶部 滚动条置顶时隐藏
if (!showNav) {
nav && nav.classList.replace('-top-20', 'top-0')
windowTop = scrollS
} else {
nav && nav.classList.replace('top-0', '-top-20')
windowTop = scrollS
}
}, throttleMs)
)

const toggleMenuOpen = () => {
changeShow(!isOpen)
}

return (
<div id='top-nav' className={'fixed top-0 w-full z-40 bg-white dark:bg-neutral-900 shadow bg-opacity-70 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg md:shadow-none pb-2 md:pb-0 ' + className}>
{/* 图标Logo */}
<div className='fixed block md:hidden top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
<LogoBar {...props} />
</div>
<div
id='top-nav'
className={
'fixed top-0 w-full z-40 bg-white dark:bg-neutral-900 shadow bg-opacity-70 dark:bg-opacity-60 backdrop-filter backdrop-blur-lg md:shadow-none pb-2 md:pb-0 ' +
className
}>
{/* 图标Logo */}
<div className='fixed block md:hidden top-0 left-5 md:left-4 z-40 pt-3 md:pt-4'>
<LogoBar {...props} />
</div>

{/* 移动端折叠菜单 */}
<Collapse type='vertical' collapseRef={collapseRef} isOpen={isOpen} className='md:hidden mt-16'>
<div className='pt-1 py-3 lg:hidden '>
<MenuBarMobile {...props} onHeightChange={(param) => collapseRef.current?.updateCollapseHeight(param)} />
</div>
</Collapse>

{/* 导航栏菜单 */}
<div className='h-18 px-5'>
{/* 导航栏菜单 */}
<div className='h-18 px-5'>
<div className='absolute top-0 right-5'>
{/* 搜索框、折叠按钮、仅移动端显示 */}
<div className='pt-1 flex md:hidden justify-end items-center space-x-3 font-serif dark:text-gray-200 '>
<div className='relative md:hidden top-0 right-0'>
<SearchInput className='my-3 rounded-full' />
</div>
<DarkModeButton className='flex text-md items-center h-full' />
<div
onClick={toggleMenuOpen}
className='w-4 text-center cursor-pointer text-lg hover:scale-110 duration-150'>
{isOpen ? (
<i className='fas fa-times' />
) : (
<i className='fa-solid fa-ellipsis-vertical' />
)}
</div>
</div>

<div className='absolute top-0 right-5'>
{/* 搜索框、折叠按钮、仅移动端显示 */}
<div className='pt-1 flex md:hidden justify-end items-center space-x-3 font-serif dark:text-gray-200 '>
<div className='relative md:hidden top-0 right-0'>
<SearchInput className='my-3 rounded-full' />
</div>
<DarkModeButton className='flex text-md items-center h-full' />
<div onClick={toggleMenuOpen} className='w-4 text-center cursor-pointer text-lg hover:scale-110 duration-150'>
{isOpen ? <i className='fas fa-times' /> : <i className="fa-solid fa-ellipsis-vertical"/>}
</div>
</div>
{/* 桌面端顶部菜单 */}
<div className='hidden md:flex'>
{/* {links && links?.map((link, index) => <MenuItemDrop key={index} link={link} />)} */}
<SearchInput className='my-3 rounded-full' />
<DarkModeButton className='my-5 mr-6 text-sm flex items-center h-full pt-px' />
</div>
</div>
</div>

{/* 桌面端顶部菜单 */}
<div className='hidden md:flex'>
{/* {links && links?.map((link, index) => <MenuItemDrop key={index} link={link} />)} */}
<SearchInput className='my-3 rounded-full' />
<DarkModeButton className='my-5 mr-6 text-sm flex items-center h-full pt-px' />
</div>
</div>
</div>
{/* 移动端折叠菜单 */}
<Collapse
type='vertical'
collapseRef={collapseRef}
isOpen={isOpen}
className='md:hidden mt-16'>
<div className='pt-1 py-3 lg:hidden '>
<MenuBarMobile
{...props}
onHeightChange={param =>
collapseRef.current?.updateCollapseHeight(param)
}
/>
</div>
</Collapse>
</div>
)
}

0 comments on commit 3c29590

Please sign in to comment.