refactor

themes/commerce/components/MenuGroupCard.js

@@ -1,18 +1,35 @@
-import Link from 'next/link'
 import { useGlobal } from '@/lib/global'
+import Link from 'next/link'
 import CONFIG from '../config'
 
-const MenuGroupCard = (props) => {
+const MenuGroupCard = props => {
   const { postCount, categoryOptions, tagOptions } = props
   const { locale } = useGlobal()
   const archiveSlot = <div className='text-center'>{postCount}</div>
-  const categorySlot = <div className='text-center'>{categoryOptions?.length}</div>
+  const categorySlot = (
+    <div className='text-center'>{categoryOptions?.length}</div>
+  )
   const tagSlot = <div className='text-center'>{tagOptions?.length}</div>
 
   const links = [
-    { name: locale.COMMON.ARTICLE, to: '/archive', slot: archiveSlot, show: CONFIG.MENU_ARCHIVE },
-    { name: locale.COMMON.CATEGORY, to: '/category', slot: categorySlot, show: CONFIG.MENU_CATEGORY },
-    { name: locale.COMMON.TAGS, to: '/tag', slot: tagSlot, show: CONFIG.MENU_TAG }
+    {
+      name: locale.COMMON.ARTICLE,
+      to: '/archive',
+      slot: archiveSlot,
+      show: CONFIG.MENU_ARCHIVE
+    },
+    {
+      name: locale.COMMON.CATEGORY,
+      to: '/category',
+      slot: categorySlot,
+      show: CONFIG.MENU_CATEGORY
+    },
+    {
+      name: locale.COMMON.TAGS,
+      to: '/tag',
+      slot: tagSlot,
+      show: CONFIG.MENU_TAG
+    }
   ]
 
   for (let i = 0; i < links.length; i++) {
@@ -22,29 +39,31 @@ const MenuGroupCard = (props) => {
   }
 
   return (
-    <nav id='nav' className='leading-8 flex justify-center  dark:text-gray-200 w-full'>
-        {links.map(link => {
-          if (link.show) {
-            return (
-              <Link
-                key={`${link.to}`}
-                title={link.to}
-                href={link.to}
-                target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className={'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'}>
-
-                <div className='w-full items-center justify-center hover:scale-105 duration-200 transform dark:hover:text-red-400 hover:text-red-600'>
-                  <div className='text-center'>{link.name}</div>
-                  <div className='text-center font-semibold'>{link.slot}</div>
-                </div>
-
-              </Link>
-            )
-          } else {
-            return null
-          }
-        })}
-      </nav>
+    <nav
+      id='nav'
+      className='leading-8 flex justify-center  dark:text-gray-200 w-full'>
+      {links.map(link => {
+        if (link.show) {
+          return (
+            <Link
+              key={`${link.to}`}
+              title={link.to}
+              href={link.to}
+              target={link?.target}
+              className={
+                'py-1.5 my-1 px-2 duration-300 text-base justify-center items-center cursor-pointer'
+              }>
+              <div className='w-full items-center justify-center hover:scale-105 duration-200 transform dark:hover:text-red-400 hover:text-red-600'>
+                <div className='text-center'>{link.name}</div>
+                <div className='text-center font-semibold'>{link.slot}</div>
+              </div>
+            </Link>
+          )
+        } else {
+          return null
+        }
+      })}
+    </nav>
   )
 }
 export default MenuGroupCard

themes/commerce/components/MenuItemCollapse.js

@@ -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
@@ -26,30 +26,55 @@ export const MenuItemCollapse = (props) => {
     return null
   }
 
-  return <>
-        <div className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray' onClick={toggleShow} >
-            {!hasSubMenu && <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className="hover:text-[#D2232A] font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1">
-                <span className=' transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
-            </Link>}
-            {hasSubMenu && <div
-                onClick={hasSubMenu ? toggleOpenSubMenu : null}
-                className="hover:text-[#D2232A]  font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1">
-                <span className='transition-all items-center duration-200'>{link?.icon && <i className={link.icon + ' mr-4'} />}{link?.name}</span>
-                <i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
-            </div>}
-        </div>
+  return (
+    <>
+      <div
+        className='w-full px-8 py-3 text-left dark:bg-hexo-black-gray'
+        onClick={toggleShow}>
+        {!hasSubMenu && (
+          <Link
+            href={link?.to}
+            target={link?.target}
+            className='hover:text-[#D2232A] font-extralight flex justify-between pl-2 pr-4 dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <span className=' transition-all items-center duration-200'>
+              {link?.icon && <i className={link.icon + ' mr-4'} />}
+              {link?.name}
+            </span>
+          </Link>
+        )}
+        {hasSubMenu && (
+          <div
+            onClick={hasSubMenu ? toggleOpenSubMenu : null}
+            className='hover:text-[#D2232A]  font-extralight flex items-center justify-between pl-2 pr-4 cursor-pointer  dark:text-gray-200 no-underline tracking-widest pb-1'>
+            <span className='transition-all items-center duration-200'>
+              {link?.icon && <i className={link.icon + ' mr-4'} />}
+              {link?.name}
+            </span>
+            <i
+              className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''} text-gray-400`}></i>
+          </div>
+        )}
+      </div>
 
-        {/* 折叠子菜单 */}
-        {hasSubMenu && <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
-            {link.subMenus.map((sLink, index) => {
-              return <div key={index} className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
-                    <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-sm ml-4 whitespace-nowrap'>{link?.icon && <i className={sLink.icon + ' mr-2'} />} {sLink.title}</span>
-                    </Link>
-                </div>
-            })}
-        </Collapse>}
+      {/* 折叠子菜单 */}
+      {hasSubMenu && (
+        <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <div
+                key={index}
+                className='dark:bg-black dark:text-gray-200 text-left px-10 justify-start bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  py-3 pr-6'>
+                <Link href={sLink.to} target={link?.target}>
+                  <span className='text-sm ml-4 whitespace-nowrap'>
+                    {link?.icon && <i className={sLink.icon + ' mr-2'} />}{' '}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </div>
+            )
+          })}
+        </Collapse>
+      )}
     </>
+  )
 }

themes/commerce/components/MenuItemDrop.js

@@ -11,33 +11,51 @@ export const MenuItemDrop = ({ link }) => {
     return null
   }
 
-  return <div onMouseOver={() => changeShow(true)} onMouseOut={() => changeShow(false)} className='h-full'>
+  return (
+    <div
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}
+      className='h-full'>
+      {!hasSubMenu && (
+        <Link
+          href={link?.to}
+          target={link?.target}
+          className={`${selected && 'border-b-2 border-[#D2232A]'} h-full flex space-x-1 whitespace-nowrap items-center font-sans menu-link pl-2 pr-4  dark:text-gray-200 no-underline tracking-widest pb-1`}>
+          {link?.icon && <i className={link?.icon} />} <div>{link?.name}</div>
+          {/* {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>} */}
+        </Link>
+      )}
 
-        {!hasSubMenu &&
-            <Link
-                href={link?.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}
-                className={`${selected && 'border-b-2 border-[#D2232A]'} h-full flex space-x-1 whitespace-nowrap items-center font-sans menu-link pl-2 pr-4  dark:text-gray-200 no-underline tracking-widest pb-1`}>
-                {link?.icon && <i className={link?.icon}/>} <div>{link?.name}</div>
-                {/* {hasSubMenu && <i className='px-2 fa fa-angle-down'></i>} */}
-            </Link>}
-
-        {hasSubMenu && <>
-            <div className='h-full flex space-x-1 whitespace-nowrap items-center cursor-pointer font-sans menu-link pl-2 pr-4  dark:text-gray-200 no-underline tracking-widest pb-1'>
-                {link?.icon && <i className={link?.icon}/>} <div>{link?.name}</div>
-                {/* <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i> */}
-            </div>
-        </>}
-
-        {/* 子菜单 */}
-        {hasSubMenu && <ul style={{ backdropFilter: 'blur(3px)' }} className={`${show ? 'visible opacity-100 shadow-lg' : 'invisible opacity-0'} overflow-hidden bg-white transition-all duration-300 z-20 absolute block  `}>
-            {link.subMenus.map((sLink, index) => {
-              return <li key={index} className='cursor-pointer hover:bg-red-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
-                    <Link href={sLink.to} target={link?.to?.indexOf('http') === 0 ? '_blank' : '_self'}>
-                        <span className='text-sm text-nowrap font-extralight'>{link?.icon && <i className={sLink?.icon} > &nbsp; </i>}{sLink.title}</span>
-                    </Link>
-                </li>
-            })}
-        </ul>}
+      {hasSubMenu && (
+        <>
+          <div className='h-full flex space-x-1 whitespace-nowrap items-center cursor-pointer font-sans menu-link pl-2 pr-4  dark:text-gray-200 no-underline tracking-widest pb-1'>
+            {link?.icon && <i className={link?.icon} />} <div>{link?.name}</div>
+            {/* <i className={`px-2 fa fa-angle-down duration-300  ${show ? 'rotate-180' : 'rotate-0'}`}></i> */}
+          </div>
+        </>
+      )}
 
+      {/* 子菜单 */}
+      {hasSubMenu && (
+        <ul
+          style={{ backdropFilter: 'blur(3px)' }}
+          className={`${show ? 'visible opacity-100 shadow-lg' : 'invisible opacity-0'} overflow-hidden bg-white transition-all duration-300 z-20 absolute block  `}>
+          {link.subMenus.map((sLink, index) => {
+            return (
+              <li
+                key={index}
+                className='cursor-pointer hover:bg-red-300 text-gray-900 hover:text-black tracking-widest transition-all duration-200 dark:border-gray-800  py-1 pr-6 pl-3'>
+                <Link href={sLink.to} target={link?.target}>
+                  <span className='text-sm text-nowrap font-extralight'>
+                    {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                    {sLink.title}
+                  </span>
+                </Link>
+              </li>
+            )
+          })}
+        </ul>
+      )}
     </div>
+  )
 }