From 83584ad06ac763fa74e6c51ed5d2edbed115b659 Mon Sep 17 00:00:00 2001 From: tangly1024 Date: Fri, 24 Mar 2023 22:34:36 +0800 Subject: [PATCH] menu-animation --- .../fukasawa/components/MenuItemCollapse.js | 2 +- themes/hexo/components/MenuItemCollapse.js | 4 +- themes/matery/components/MenuItemCollapse.js | 4 +- themes/medium/components/MenuItemCollapse.js | 2 +- .../{CollapseMenu.js => MenuItemCollapse.js} | 4 +- themes/next/components/MenuList.js | 4 +- .../nobelium/components/MenuItemCollapse.js | 55 +++++++++++ themes/nobelium/components/Nav.js | 93 +++++++++++-------- themes/simple/components/MenuItemCollapse.js | 11 ++- themes/simple/components/MenuList.js | 10 +- 10 files changed, 130 insertions(+), 59 deletions(-) rename themes/next/components/{CollapseMenu.js => MenuItemCollapse.js} (93%) create mode 100644 themes/nobelium/components/MenuItemCollapse.js diff --git a/themes/fukasawa/components/MenuItemCollapse.js b/themes/fukasawa/components/MenuItemCollapse.js index a8514875..7cb3061c 100644 --- a/themes/fukasawa/components/MenuItemCollapse.js +++ b/themes/fukasawa/components/MenuItemCollapse.js @@ -42,7 +42,7 @@ export const MenuItemCollapse = (props) => { onClick={hasSubMenu ? toggleOpenSubMenu : null} className="py-2 font-extralight flex justify-between cursor-pointer dark:text-gray-200 no-underline tracking-widest">
{link.name}
-
+
} diff --git a/themes/hexo/components/MenuItemCollapse.js b/themes/hexo/components/MenuItemCollapse.js index 032fa3a5..f4196f29 100644 --- a/themes/hexo/components/MenuItemCollapse.js +++ b/themes/hexo/components/MenuItemCollapse.js @@ -36,7 +36,7 @@ export const MenuItemCollapse = ({ link }) => { onClick={hasSubMenu ? toggleOpenSubMenu : null} className="font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer dark:text-gray-200 no-underline tracking-widest pb-1"> {link?.icon && }{link?.name} - + } @@ -45,7 +45,7 @@ export const MenuItemCollapse = ({ link }) => { {link.subMenus.map(sLink => { return
- {link?.icon && } {sLink.title} + {link?.icon && } {sLink.title}
})} diff --git a/themes/matery/components/MenuItemCollapse.js b/themes/matery/components/MenuItemCollapse.js index 3df75d6e..15cc3d99 100644 --- a/themes/matery/components/MenuItemCollapse.js +++ b/themes/matery/components/MenuItemCollapse.js @@ -35,7 +35,7 @@ export const MenuItemCollapse = ({ link }) => { {!hasSubMenu &&
- +
{link.name}
{link.slot} @@ -43,7 +43,7 @@ export const MenuItemCollapse = ({ link }) => { {hasSubMenu &&
{link?.name}
- +
} diff --git a/themes/medium/components/MenuItemCollapse.js b/themes/medium/components/MenuItemCollapse.js index a0a88a66..f56bcb1c 100644 --- a/themes/medium/components/MenuItemCollapse.js +++ b/themes/medium/components/MenuItemCollapse.js @@ -42,7 +42,7 @@ export const MenuItemCollapse = (props) => { onClick={hasSubMenu ? toggleOpenSubMenu : null} className="py-2 font-extralight flex justify-between cursor-pointer dark:text-gray-200 no-underline tracking-widest">
{link.name}
-
+
} diff --git a/themes/next/components/CollapseMenu.js b/themes/next/components/MenuItemCollapse.js similarity index 93% rename from themes/next/components/CollapseMenu.js rename to themes/next/components/MenuItemCollapse.js index 6a39e153..879ff3ad 100644 --- a/themes/next/components/CollapseMenu.js +++ b/themes/next/components/MenuItemCollapse.js @@ -7,7 +7,7 @@ import { useState } from 'react' * @param {*} param0 * @returns */ -export const CollapseMenu = (props) => { +export const MenuItemCollapse = (props) => { const { link } = props const [show, changeShow] = useState(false) const hasSubMenu = link?.subMenus?.length > 0 @@ -34,7 +34,7 @@ export const CollapseMenu = (props) => { onClick={hasSubMenu ? toggleOpenSubMenu : null} className="font-extralight flex justify-between cursor-pointer dark:text-gray-200 no-underline tracking-widest">
{link.name}
-
+
} diff --git a/themes/next/components/MenuList.js b/themes/next/components/MenuList.js index 4023fd4a..9d86c5b9 100644 --- a/themes/next/components/MenuList.js +++ b/themes/next/components/MenuList.js @@ -3,7 +3,7 @@ import { useGlobal } from '@/lib/global' import CONFIG_NEXT from '../config_next' import BLOG from '@/blog.config' import { MenuItemDrop } from './MenuItemDrop' -import { CollapseMenu } from './CollapseMenu' +import { MenuItemCollapse } from './MenuItemCollapse' export const MenuList = (props) => { const { postCount, customNav, customMenu } = props @@ -36,7 +36,7 @@ export const MenuList = (props) => { {/* 移动端菜单 */} ) diff --git a/themes/nobelium/components/MenuItemCollapse.js b/themes/nobelium/components/MenuItemCollapse.js new file mode 100644 index 00000000..323514a9 --- /dev/null +++ b/themes/nobelium/components/MenuItemCollapse.js @@ -0,0 +1,55 @@ +import Collapse from '@/components/Collapse' +import Link from 'next/link' +import { useState } from 'react' + +/** + * 折叠菜单 + * @param {*} param0 + * @returns + */ +export const MenuItemCollapse = (props) => { + const { link } = props + const [show, changeShow] = useState(false) + const hasSubMenu = link?.subMenus?.length > 0 + + const [isOpen, changeIsOpen] = useState(false) + + const toggleShow = () => { + changeShow(!show) + } + + const toggleOpenSubMenu = () => { + changeIsOpen(!isOpen) + } + + if (!link || !link.show) { + return null + } + + return <> +
+ {!hasSubMenu && + {link?.icon && }{link?.name} + } + {hasSubMenu &&
+ {link?.icon && }{link?.name} + +
} +
+ + {/* 折叠子菜单 */} + {hasSubMenu && + {link.subMenus.map(sLink => { + return
+ + {sLink.title} + +
+ })} + } + +} diff --git a/themes/nobelium/components/Nav.js b/themes/nobelium/components/Nav.js index 995b5ab8..ab7d7e4f 100644 --- a/themes/nobelium/components/Nav.js +++ b/themes/nobelium/components/Nav.js @@ -1,10 +1,12 @@ -import { useEffect, useRef } from 'react' +import { useEffect, useRef, useState } from 'react' import Link from 'next/link' import BLOG from '@/blog.config' import { useGlobal } from '@/lib/global' import CONFIG_NOBELIUM from '../config_nobelium' import { SvgIcon } from './SvgIcon' import { MenuItemDrop } from './MenuItemDrop' +import Collapse from '@/components/Collapse' +import { MenuItemCollapse } from './MenuItemCollapse' const Nav = props => { const { navBarTitle, fullWidth, siteInfo } = props @@ -32,47 +34,51 @@ const Nav = props => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [sentinalRef]) return <> -
- + } const NavBar = props => { const { customMenu, customNav } = props + const [isOpen, changeOpen] = useState(false) + const toggleOpen = () => { + changeOpen(!isOpen) + } + const collapseRef = useRef(null) const { locale } = useGlobal() let links = [ @@ -92,11 +98,18 @@ const NavBar = props => { } return ( -
-
    - {links.map(link => )} -
-
+
+
    + {links.map(link => )} +
+
+ +
+ {links.map(link => collapseRef.current?.updateCollapseHeight(param)}/>)} +
+ +
+
) } diff --git a/themes/simple/components/MenuItemCollapse.js b/themes/simple/components/MenuItemCollapse.js index fe6fcdf6..6abe88d8 100644 --- a/themes/simple/components/MenuItemCollapse.js +++ b/themes/simple/components/MenuItemCollapse.js @@ -7,7 +7,8 @@ import { useState } from 'react' * @param {*} param0 * @returns */ -export const MenuItemCollapse = ({ link }) => { +export const MenuItemCollapse = (props) => { + const { link } = props const [show, changeShow] = useState(false) const hasSubMenu = link?.subMenus?.length > 0 @@ -29,19 +30,19 @@ export const MenuItemCollapse = ({ link }) => {
{!hasSubMenu && + className="font-extralight items-center flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1"> {link?.name} } {hasSubMenu &&
+ className="font-extralight items-center flex justify-between pl-2 pr-4 cursor-pointer dark:text-gray-200 no-underline tracking-widest pb-1"> {link?.name} - +
}
{/* 折叠子菜单 */} - {hasSubMenu && + {hasSubMenu && {link.subMenus.map(sLink => { return
diff --git a/themes/simple/components/MenuList.js b/themes/simple/components/MenuList.js index ca1b1de1..d98fc133 100644 --- a/themes/simple/components/MenuList.js +++ b/themes/simple/components/MenuList.js @@ -2,7 +2,7 @@ import BLOG from '@/blog.config' import Collapse from '@/components/Collapse' import { useGlobal } from '@/lib/global' import { useRouter } from 'next/router' -import { useEffect, useState } from 'react' +import { useEffect, useRef, useState } from 'react' import CONFIG_SIMPLE from '../config_simple' import { MenuItemCollapse } from './MenuItemCollapse' import { MenuItemDrop } from './MenuItemDrop' @@ -22,6 +22,8 @@ export const MenuList = ({ customNav, customMenu }) => { changeIsOpen(false) } const router = useRouter() + const collapseRef = useRef(null) + useEffect(() => { router.events.on('routeChangeStart', closeMenu) }) @@ -54,13 +56,13 @@ export const MenuList = ({ customNav, customMenu }) => { {/* 移动端小屏菜单 */}