Medium主题移动端菜单

components/Collapse.js

@@ -28,7 +28,7 @@ const Collapse = props => {
     }
   }, [props.isOpen])
   return (
-    <div ref={collapseRef} style={{ height: '0px' }} className='overflow-hidden duration-200'>
+    <div ref={collapseRef} style={{ height: '0px' }} className={'overflow-hidden duration-200 ' + props.className }>
       {props.children}
     </div>
   )

themes/fukasawa/components/TopNav.js

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import Collapse from './Collapse'
+import Collapse from '@/components/Collapse'
 import GroupMenu from './GroupMenu'
 import Logo from './Logo'
 import SearchInput from './SearchInput'

themes/medium/LayoutSearch.js

@@ -17,7 +17,7 @@ export const LayoutSearch = (props) => {
         container.innerHTML = container.innerHTML.replace(re, `<span class='text-red-500 border-b border-dashed'>${keyword}</span>`)
       }
     },
-      100)
+    100)
   })
   return <LayoutBase {...props}>
     <div className='py-12'>

themes/medium/components/GroupMenu.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { useGlobal } from '@/lib/global'
+import CONFIG_MEDIUM from '../config_medium'
+
+function GroupMenu ({ customNav }) {
+  const { locale } = useGlobal()
+  const router = useRouter()
+
+  let links = [
+    { name: locale.NAV.INDEX, to: '/' || '/', show: true },
+    { name: locale.COMMON.CATEGORY, to: '/category', show: CONFIG_MEDIUM.MENU_CATEGORY },
+    { name: locale.COMMON.TAGS, to: '/tag', show: CONFIG_MEDIUM.MENU_TAG },
+    { name: locale.NAV.ARCHIVE, to: '/archive', show: CONFIG_MEDIUM.MENU_ARCHIVE },
+    { name: locale.NAV.SEARCH, to: '/search', show: CONFIG_MEDIUM.MENU_SEARCH }
+  ]
+
+  if (customNav) {
+    links = links.concat(customNav)
+  }
+
+  return <nav id='nav' className='font-sans text-sm'>
+      {links.map(link => {
+        if (link.show) {
+          const selected = (router.pathname === link.to) || (router.asPath === link.to)
+          return <Link key={`${link.to}`} title={link.to} href={link.to} >
+          <a className={'py-0.5 duration-500 justify-between text-gray-500 dark:text-gray-300 hover:text-black hover:underline cursor-pointer flex flex-nowrap items-center ' +
+              (selected ? 'text-black' : ' ')} >
+              <div className='my-auto items-center justify-center flex '>
+                <div className={ 'hover:text-black'}>{link.name}</div>
+              </div>
+              {link.slot}
+            </a>
+          </Link>
+        } else {
+          return null
+        }
+      })}
+    </nav>
+}
+
+export default GroupMenu

themes/medium/components/TopNavBar.js

@@ -1,40 +1,60 @@
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 import LogoBar from './LogoBar'
-
+import React from 'react'
+import Collapse from '@/components/Collapse'
+import GroupMenu from './GroupMenu'
 /**
  * 顶部导航栏 + 菜单
  * @param {} param0
  * @returns
  */
-export default function TopNavBar (props) {
+export default function TopNavBar(props) {
   const { className, customNav } = props
   const router = useRouter()
+  const [isOpen, changeShow] = React.useState(false)
+
+  const toggleMenuOpen = () => {
+    changeShow(!isOpen)
+  }
 
   return <div id='top-nav' className={'sticky top-0 lg:relative w-full z-40 ' + className}>
-    <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-5 items-between'>
-      <LogoBar {...props}/>
+        <Collapse isOpen={isOpen} className='flex md:hidden'>
+            <div className='py-1 px-5'>
+                <GroupMenu {...props} />
+            </div>
+        </Collapse>
 
-      {/* 顶部菜单 */}
-      <div className='flex'>
-        {customNav && customNav.map(link => {
-          if (link.show) {
-            const selected = (router.pathname === link.to) || (router.asPath === link.to)
-            return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
-            <a target={link.to.indexOf('http') === 0 ? '_blank' : '_self'} className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
-                (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')} >
-                <div className='items-center justify-center flex '>
-                  <i className={link.icon} />
-                  <div className='ml-2 whitespace-nowrap'>{link.name}</div>
+        <div className='flex w-full h-12 shadow bg-white dark:bg-hexo-black-gray px-5 items-between'>
+            <LogoBar {...props} />
+
+            {/* 右侧功能 */}
+            <div className='mr-1 flex md:hidden justify-end items-center text-sm space-x-4 font-serif dark:text-gray-200'>
+                <div onClick={toggleMenuOpen} className='cursor-pointer'>
+                    {isOpen ? <i className='fas fa-times' /> : <i className='fas fa-bars' />}
                 </div>
-                {link.slot}
-              </a>
-            </Link>
-          } else {
-            return null
-          }
-        })}
-      </div>
+            </div>
+
+            {/* 顶部菜单 */}
+            <div className='hidden md:flex'>
+                {customNav && customNav.map(link => {
+                  if (link.show) {
+                    const selected = (router.pathname === link.to) || (router.asPath === link.to)
+                    return <Link key={`${link.id}-${link.to}`} title={link.to} href={link.to} >
+                            <a target={link.to.indexOf('http') === 0 ? '_blank' : '_self'} className={'px-2 duration-300 text-sm justify-between dark:text-gray-300 hover:underline cursor-pointer flex flex-nowrap items-center ' +
+                                (selected ? 'bg-green-600 text-white hover:text-white' : 'hover:text-green-600')} >
+                                <div className='items-center justify-center flex '>
+                                    <i className={link.icon} />
+                                    <div className='ml-2 whitespace-nowrap'>{link.name}</div>
+                                </div>
+                                {link.slot}
+                            </a>
+                        </Link>
+                  } else {
+                    return null
+                  }
+                })}
+            </div>
+        </div>
     </div>
-  </div>
 }