diff --git a/components/Collapse.js b/components/Collapse.js index 57626c04..a787bfa2 100644 --- a/components/Collapse.js +++ b/components/Collapse.js @@ -58,17 +58,20 @@ const Collapse = props => { clearTimeout(clearTime) } + const updateHeight = () => { + collapseRef.current.style.height = 'auto' + } + React.useEffect(() => { - const element = collapseRef.current if (props.isOpen) { - expandSection(element) + expandSection(collapseRef.current) } else { - collapseSection(element) + collapseSection(collapseRef.current) } }, [props.isOpen]) return ( -
+
{props.children}
) diff --git a/lib/notion/getPageProperties.js b/lib/notion/getPageProperties.js index 53b1bee7..0a328868 100644 --- a/lib/notion/getPageProperties.js +++ b/lib/notion/getPageProperties.js @@ -82,7 +82,7 @@ export default async function getPageProperties(id, block, schema, authToken, ta properties.slug = properties.slug ?? properties.id } else if (properties.type === BLOG.NOTION_PROPERTY_NAME.type_menu || properties.type === BLOG.NOTION_PROPERTY_NAME.type_sub_menu) { // 菜单路径为空、作为可展开菜单使用 - properties.to = properties.slug ?? '#' + properties.to = properties.slug ?? null properties.name = properties.title ?? '' } diff --git a/themes/simple/components/CollapseMenu.js b/themes/simple/components/CollapseMenu.js index b5853aee..73b0804b 100644 --- a/themes/simple/components/CollapseMenu.js +++ b/themes/simple/components/CollapseMenu.js @@ -23,19 +23,23 @@ export const CollapseMenu = ({ link }) => { return <>
- + className="font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1"> {link?.name} - {hasSubMenu && } - + } + {hasSubMenu &&
+ {link?.name} + +
}
{/* 折叠子菜单 */} {hasSubMenu && {link.subMenus.map(sLink => { - return
+ return
{sLink.title} diff --git a/themes/simple/components/DropMenu.js b/themes/simple/components/DropMenu.js index eebfe0f1..7486f7c0 100644 --- a/themes/simple/components/DropMenu.js +++ b/themes/simple/components/DropMenu.js @@ -7,23 +7,31 @@ export const DropMenu = ({ link }) => { return
changeShow(true)} onMouseOut={() => changeShow(false)} > + {!hasSubMenu && {link?.name} {hasSubMenu && } - + } - {/* 子菜单 */} - {hasSubMenu &&
    - {link.subMenus.map(sLink => { - return
  • - - {sLink.title} - -
  • - })} -
} + {hasSubMenu && <> +
+ {link?.name} + +
+ } + + {/* 子菜单 */} + {hasSubMenu &&
    + {link.subMenus.map(sLink => { + return
  • + + {sLink.title} + +
  • + })} +
}
} diff --git a/themes/simple/components/NavBarMenu.js b/themes/simple/components/NavBarMenu.js index b40bcef5..d4436c6e 100644 --- a/themes/simple/components/NavBarMenu.js +++ b/themes/simple/components/NavBarMenu.js @@ -1,7 +1,8 @@ import BLOG from '@/blog.config' import Collapse from '@/components/Collapse' import { useGlobal } from '@/lib/global' -import { useState } from 'react' +import { useRouter } from 'next/router' +import { useEffect, useState } from 'react' import CONFIG_SIMPLE from '../config_simple' import { CollapseMenu } from './CollapseMenu' import { DropMenu } from './DropMenu' @@ -13,10 +14,17 @@ import { DropMenu } from './DropMenu' */ export const NavBarMenu = ({ customNav, customMenu }) => { const { locale } = useGlobal() - const [isOpen, changeIsOpen] = useState(true) + const [isOpen, changeIsOpen] = useState(false) const toggleIsOpen = () => { changeIsOpen(!isOpen) } + const closeMenu = (e) => { + changeIsOpen(false) + } + const router = useRouter() + useEffect(() => { + router.events.on('routeChangeComplete', closeMenu) + }) let links = [ { icon: 'fas fa-search', name: locale.NAV.SEARCH, to: '/search', show: CONFIG_SIMPLE.MENU_SEARCH }, @@ -49,10 +57,10 @@ export const NavBarMenu = ({ customNav, customMenu }) => {