mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-06-09 07:26:47 +00:00
refactor
This commit is contained in:
tangly1024.com
@@ -7,7 +7,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
|
||||
@@ -22,32 +22,64 @@ export const MenuItemCollapse = (props) => {
|
||||
changeIsOpen(!isOpen)
|
||||
}
|
||||
|
||||
return <>
|
||||
<div className='px-5 py-2 w-full text-left duration-200 hover:bg-gray-700 hover:text-white not:last-child:border-b-0 border-b dark:bg-hexo-black-gray dark:border-black' onClick={toggleShow} >
|
||||
{!hasSubMenu && <Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
|
||||
className='w-full my-auto items-center justify-between flex dark:text-gray-200 '>
|
||||
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
|
||||
</Link>}
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className='px-5 py-2 w-full text-left duration-200 hover:bg-gray-700 hover:text-white not:last-child:border-b-0 border-b dark:bg-hexo-black-gray dark:border-black'
|
||||
onClick={toggleShow}>
|
||||
{!hasSubMenu && (
|
||||
<Link
|
||||
href={link?.to}
|
||||
target={link?.target}
|
||||
className='w-full my-auto items-center justify-between flex dark:text-gray-200 '>
|
||||
<div>
|
||||
<div className={`${link.icon} text-center w-4 mr-4`} />
|
||||
{link.name}
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{hasSubMenu && <div
|
||||
onClick={hasSubMenu ? toggleOpenSubMenu : null}
|
||||
className="font-extralight flex justify-between cursor-pointer dark:text-gray-200 no-underline tracking-widest">
|
||||
<div><div className={`${link.icon} text-center w-4 mr-4`} />{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='font-extralight flex justify-between cursor-pointer dark:text-gray-200 no-underline tracking-widest'>
|
||||
<div>
|
||||
<div className={`${link.icon} text-center w-4 mr-4`} />
|
||||
{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='whitespace-nowrap dark:text-gray-200
|
||||
{/* 折叠子菜单 */}
|
||||
{hasSubMenu && (
|
||||
<Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
|
||||
{link.subMenus.map((sLink, index) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className='whitespace-nowrap dark:text-gray-200
|
||||
not:last-child:border-b-0 border-b dark:border-gray-800 py-2 px-14 cursor-pointer hover:bg-gray-100
|
||||
font-extralight dark:bg-black text-left justify-start text-gray-600 bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200'>
|
||||
<Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
|
||||
<div>{sLink.icon && <div className={`${sLink.icon} text-center w-3 mr-3 text-xs`} />}{sLink.title}</div>
|
||||
</Link>
|
||||
</div>
|
||||
})}
|
||||
</Collapse>}
|
||||
<Link href={sLink.to} target={link?.target}>
|
||||
<div>
|
||||
{sLink.icon && (
|
||||
<div
|
||||
className={`${sLink.icon} text-center w-3 mr-3 text-xs`}
|
||||
/>
|
||||
)}
|
||||
{sLink.title}
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</Collapse>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -5,34 +5,62 @@ export const MenuItemDrop = ({ link }) => {
|
||||
const [show, changeShow] = useState(false)
|
||||
const hasSubMenu = link?.subMenus?.length > 0
|
||||
|
||||
return <li onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)}
|
||||
className='relative py-1.5 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center '>
|
||||
return (
|
||||
<li
|
||||
onMouseOver={() => changeShow(true)}
|
||||
onMouseOut={() => changeShow(false)}
|
||||
className='relative py-1.5 px-5 duration-300 text-base justify-between hover:bg-gray-700 hover:text-white hover:shadow-lg cursor-pointer font-light flex flex-nowrap items-center '>
|
||||
{!hasSubMenu && (
|
||||
<Link
|
||||
href={link?.to}
|
||||
target={link?.target}
|
||||
className='w-full my-auto items-center justify-between flex '>
|
||||
<div>
|
||||
<div className={`${link.icon} text-center w-4 mr-4`} />
|
||||
{link.name}
|
||||
</div>
|
||||
{link.slot}
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{!hasSubMenu &&
|
||||
<Link href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='w-full my-auto items-center justify-between flex ' >
|
||||
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
|
||||
{link.slot}
|
||||
</Link>}
|
||||
|
||||
{hasSubMenu &&
|
||||
<div className='w-full my-auto items-center justify-between flex '>
|
||||
<div><div className={`${link.icon} text-center w-4 mr-4`} />{link.name}</div>
|
||||
{link.slot}
|
||||
{hasSubMenu && <div className='text-right'><i className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i></div>}
|
||||
</div>}
|
||||
|
||||
{/* 子菜单 */}
|
||||
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} whitespace-nowrap absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
|
||||
{link?.subMenus?.map(sLink => {
|
||||
return <li key={sLink.id} >
|
||||
<Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'} className='my-auto h-9 px-2 items-center justify-start flex not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
|
||||
{sLink.icon && <i className={`${sLink.icon} w-4 text-center`} />}
|
||||
<div className={'ml-4'}>{sLink.name}</div>
|
||||
{sLink.slot}
|
||||
</Link>
|
||||
</li>
|
||||
})}
|
||||
</ul>}
|
||||
{hasSubMenu && (
|
||||
<div className='w-full my-auto items-center justify-between flex '>
|
||||
<div>
|
||||
<div className={`${link.icon} text-center w-4 mr-4`} />
|
||||
{link.name}
|
||||
</div>
|
||||
{link.slot}
|
||||
{hasSubMenu && (
|
||||
<div className='text-right'>
|
||||
<i
|
||||
className={`px-2 fas fa-chevron-right duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 子菜单 */}
|
||||
{hasSubMenu && (
|
||||
<ul
|
||||
className={`${show ? 'visible opacity-100 left-56' : 'invisible opacity-0 left-40'} whitespace-nowrap absolute right-0 top-0 w-full border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 drop-shadow-lg `}>
|
||||
{link?.subMenus?.map(sLink => {
|
||||
return (
|
||||
<li key={sLink.id}>
|
||||
<Link
|
||||
href={sLink.to}
|
||||
target={link?.target}
|
||||
className='my-auto h-9 px-2 items-center justify-start flex not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200 dark:border-gray-800 '>
|
||||
{sLink.icon && (
|
||||
<i className={`${sLink.icon} w-4 text-center`} />
|
||||
)}
|
||||
<div className={'ml-4'}>{sLink.name}</div>
|
||||
{sLink.slot}
|
||||
</Link>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user