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

refactor

Browse Source
This commit is contained in:
tangly1024.com
2024-04-10 17:36:17 +08:00
parent 213367aed6
commit 8ce32b422e
36 changed files with 1657 additions and 892 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
themes/nav/components/MenuItemCollapse.js
View File

@@ -8,7 +8,7 @@ import { useState } from 'react'
* @param {*} param0
* @returns
*/
export const MenuItemCollapse = (props) => {
export const MenuItemCollapse = props => {
const { link } = props
const [show, changeShow] = useState(false)
const hasSubMenu = link?.subMenus?.length > 0
@@ -21,7 +21,7 @@ export const MenuItemCollapse = (props) => {
return null
}
const selected = (router.pathname === link.to) || (router.asPath === link.to)
const selected = router.pathname === link.to || router.asPath === link.to
const toggleShow = () => {
changeShow(!show)
@@ -31,32 +31,67 @@ export const MenuItemCollapse = (props) => {
changeIsOpen(!isOpen)
}
return <>
<div className={ 'text-black' + (selected ? 'text-white hover:text-white' : 'hover:text-gray-600') + ' px-7 w-full text-left duration-200 dark:border-black'} onClick={toggleShow} >
return (
<>
<div
className={
'text-black' +
(selected ? 'text-white hover:text-white' : 'hover:text-gray-600') +
' px-7 w-full text-left duration-200 dark:border-black'
}
onClick={toggleShow}>
{!hasSubMenu && (
<Link
href={link?.to}
target={link?.target}
className='py-2 w-full my-auto items-center justify-between flex '>
<div>
<div className={`${link.icon} text-center w-4 mr-4`} />
{link.name}
</div>
</Link>
)}
{!hasSubMenu && <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='py-2 w-full my-auto items-center justify-between flex '>
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
</Link>}
{hasSubMenu && (
<div
onClick={hasSubMenu ? toggleOpenSubMenu : null}
className='py-2 flex justify-between cursor-pointer dark:text-gray-400 dark:hover:text-white font-bold no-underline tracking-widest'>
<div>
<div className={`${link.icon} text-center w-4 mr-2`} />
{link.name}
</div>
<div className='inline-flex items-center '>
<i
className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i>
</div>
</div>
)}
</div>
{hasSubMenu && <div onClick={hasSubMenu ? toggleOpenSubMenu : null}
className="py-2 flex justify-between cursor-pointer dark:text-gray-400 dark:hover:text-white font-bold no-underline tracking-widest">
<div><div className={`${link.icon} text-center w-4 mr-2`} />{link.name}</div>
<div className='inline-flex items-center '><i className={`px-2 fas fa-chevron-right transition-all duration-200 ${isOpen ? 'rotate-90' : ''}`}></i></div>
</div>}
</div>
{/* 折叠子菜单 */}
{hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link?.subMenus?.map((sLink, index) => {
return <div key={index} className='
{/* 折叠子菜单 */}
{hasSubMenu && (
<Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
{link?.subMenus?.map((sLink, index) => {
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.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}> */}
<a href={`/#${sLink.title}`} target={'_self'}>
<div><div className={`${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'} text-center w-3 mr-2 text-xs`} />{sLink.title}</div>
</a>
</div>
})}
</Collapse>}
{/* <Link href={sLink.to} target={link?.target}> */}
<a href={`/#${sLink.title}`} target={'_self'}>
<div>
<div
className={`${sLink?.icon ? sLink?.icon : 'fas fa-hashtag'} text-center w-3 mr-2 text-xs`}
/>
{sLink.title}
</div>
</a>
</div>
)
})}
</Collapse>
)}
</>
)
}