From 0b4b33907b7c5549f07bad1f5a0883a0dd1d21c7 Mon Sep 17 00:00:00 2001
From: tangly1024 <mail@tangly1024.com>
Date: Thu, 23 Mar 2023 22:17:37 +0800
Subject: [PATCH] menu-icon

---
 themes/example/components/MenuItemDrop.js  |  4 ++--
 themes/example/components/Nav.js           |  4 ++--
 themes/hexo/components/MenuItemDrop.js     |  4 ++--
 themes/matery/components/MenuItemDrop.js   |  4 ++--
 themes/medium/components/MenuItemDrop.js   | 18 +++++++++---------
 themes/nobelium/components/MenuItemDrop.js |  4 ++--
 6 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/themes/example/components/MenuItemDrop.js b/themes/example/components/MenuItemDrop.js
index f5e5dd18..4100149d 100644
--- a/themes/example/components/MenuItemDrop.js
+++ b/themes/example/components/MenuItemDrop.js
@@ -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>
         }
diff --git a/themes/example/components/Nav.js b/themes/example/components/Nav.js
index a3e48457..873d046a 100644
--- a/themes/example/components/Nav.js
+++ b/themes/example/components/Nav.js
@@ -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>
   )
diff --git a/themes/hexo/components/MenuItemDrop.js b/themes/hexo/components/MenuItemDrop.js
index 0111c073..12fa81d0 100644
--- a/themes/hexo/components/MenuItemDrop.js
+++ b/themes/hexo/components/MenuItemDrop.js
@@ -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>
         </>}
diff --git a/themes/matery/components/MenuItemDrop.js b/themes/matery/components/MenuItemDrop.js
index 9eb14386..bff61738 100644
--- a/themes/matery/components/MenuItemDrop.js
+++ b/themes/matery/components/MenuItemDrop.js
@@ -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>
         </>}
diff --git a/themes/medium/components/MenuItemDrop.js b/themes/medium/components/MenuItemDrop.js
index 1ca515d5..e72ecbaf 100644
--- a/themes/medium/components/MenuItemDrop.js
+++ b/themes/medium/components/MenuItemDrop.js
@@ -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 `}>
diff --git a/themes/nobelium/components/MenuItemDrop.js b/themes/nobelium/components/MenuItemDrop.js
index a33a7ec0..18ce2d8c 100644
--- a/themes/nobelium/components/MenuItemDrop.js
+++ b/themes/nobelium/components/MenuItemDrop.js
@@ -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>
         }