mirror of
https://github.com/d0zingcat/NotionNext.git
synced 2026-05-19 23:16:48 +00:00
menu-icon
This commit is contained in:
@@ -10,7 +10,7 @@ export const MenuItemDrop = ({ link }) => {
|
||||
{!hasSubMenu &&
|
||||
<div className="rounded px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light">
|
||||
<Link href={link?.to} >
|
||||
{link?.name}
|
||||
{link?.icon && <i className={link?.icon} />} {link?.name}
|
||||
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
|
||||
</Link>
|
||||
</div>
|
||||
@@ -18,7 +18,7 @@ export const MenuItemDrop = ({ link }) => {
|
||||
|
||||
{hasSubMenu &&
|
||||
<div className='rounded px-2 md:pl-0 md:mr-3 my-4 md:pr-3 text-gray-700 dark:text-gray-200 no-underline md:border-r border-gray-light'>
|
||||
{link?.name}
|
||||
{link?.icon && <i className={link?.icon} />} {link?.name}
|
||||
<i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
|
||||
</div>
|
||||
}
|
||||
|
||||
@@ -39,9 +39,9 @@ export const Nav = (props) => {
|
||||
{/* {links.map(link => <NormalMenuItem key={link.id} link={link}/>)} */}
|
||||
{links.map(link => <MenuItemDrop key={link.id} link={link} />)}
|
||||
</ul>
|
||||
<div className="w-full md:w-1/3 text-center md:text-right">
|
||||
{/* <div className="w-full md:w-1/3 text-center md:text-right"> */}
|
||||
{/* <!-- extra links --> */}
|
||||
</div>
|
||||
{/* </div> */}
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
|
||||
@@ -15,13 +15,13 @@ export const MenuItemDrop = ({ link }) => {
|
||||
<Link
|
||||
href={link?.to}
|
||||
className="font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1">
|
||||
{link?.name}
|
||||
{link?.icon && <i className={link?.icon}/>} {link?.name}
|
||||
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
|
||||
</Link>}
|
||||
|
||||
{hasSubMenu && <>
|
||||
<div className='cursor-pointer font-sans menu-link pl-2 pr-4 text-gray-700 dark:text-gray-200 no-underline tracking-widest pb-1'>
|
||||
{link?.name}
|
||||
{link?.icon && <i className={link?.icon}/>} {link?.name}
|
||||
<i className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
|
||||
</div>
|
||||
</>}
|
||||
|
||||
@@ -15,13 +15,13 @@ export const MenuItemDrop = ({ link }) => {
|
||||
<Link
|
||||
href={link?.to}
|
||||
className="font-sans menu-link pl-2 pr-4 no-underline tracking-widest pb-1">
|
||||
{link?.name}
|
||||
{link?.icon && <i className={link?.icon} />} {link?.name}
|
||||
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
|
||||
</Link>}
|
||||
|
||||
{hasSubMenu && <>
|
||||
<div className='cursor-pointer font-sans menu-link pl-2 pr-4 no-underline tracking-widest pb-1'>
|
||||
{link?.name}
|
||||
{link?.icon && <i className={link?.icon} />} {link?.name}
|
||||
<i className={`px-2 fa fa-angle-down duration-300 ${show ? 'rotate-180' : 'rotate-0'}`}></i>
|
||||
</div>
|
||||
</>}
|
||||
|
||||
@@ -16,22 +16,22 @@ export const MenuItemDrop = ({ link }) => {
|
||||
|
||||
{hasSubMenu &&
|
||||
<div className={'h-full whitespace-nowrap px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
|
||||
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
|
||||
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
|
||||
<div className='px-1'>
|
||||
{link?.name}
|
||||
{link?.icon && <i className={link?.icon} />} {link?.name}
|
||||
{hasSubMenu && <i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
{!hasSubMenu &&
|
||||
<div className={'h-full whitespace-nowrap px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
|
||||
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
|
||||
<Link href={link?.to} className='px-1'>
|
||||
{link?.name}
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
<div className={'h-full whitespace-nowrap px-2 duration-300 text-sm justify-between dark:text-gray-300 cursor-pointer flex flex-nowrap items-center ' +
|
||||
(selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')}>
|
||||
<Link href={link?.to} className='px-1'>
|
||||
{link?.icon && <i className={link?.icon} />} {link?.name}
|
||||
</Link>
|
||||
</div>
|
||||
}
|
||||
|
||||
{/* 子菜单 */}
|
||||
{hasSubMenu && <ul className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-0 '} border-gray-100 bg-white dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
|
||||
|
||||
@@ -10,7 +10,7 @@ export const MenuItemDrop = ({ link }) => {
|
||||
{!hasSubMenu &&
|
||||
<div className="block ml-4 text-black dark:text-gray-50 nav">
|
||||
<Link href={link?.to} >
|
||||
{link?.name}
|
||||
{link?.icon && <i className={link?.icon} />} {link?.name}
|
||||
{hasSubMenu && <i className='px-2 fa fa-angle-down'></i>}
|
||||
</Link>
|
||||
</div>
|
||||
@@ -18,7 +18,7 @@ export const MenuItemDrop = ({ link }) => {
|
||||
|
||||
{hasSubMenu &&
|
||||
<div className='block ml-4 text-black dark:text-gray-50 nav'>
|
||||
{link?.name}
|
||||
{link?.icon && <i className={link?.icon} />} {link?.name}
|
||||
<i className={`px-2 fas fa-chevron-down duration-500 transition-all ${show ? ' rotate-180' : ''}`}></i>
|
||||
</div>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user