menu-icon

This commit is contained in:
tangly1024
2023-03-23 22:17:37 +08:00
parent 7ba1d046af
commit 0b4b33907b
6 changed files with 19 additions and 19 deletions

View File

@@ -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>
}

View File

@@ -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>
)

View File

@@ -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>
</>}

View File

@@ -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>
</>}

View File

@@ -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 `}>

View File

@@ -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>
}