Add GitBook theme structure with Traditional Chinese docs

2025-09-17 13:06:47 +08:00
parent 6f6671a024
commit 49dab41935
44 changed files with 2675 additions and 0 deletions
--- a/gitbook/components/MenuItemDrop.js
+++ b/gitbook/components/MenuItemDrop.js
@@ -0,0 +1,73 @@
+import SmartLink from '@/components/SmartLink'
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+export const MenuItemDrop = ({ link }) => {
+  const [show, changeShow] = useState(false)
+  const router = useRouter()
+
+  if (!link || !link.show) {
+    return null
+  }
+  const hasSubMenu = link?.subMenus?.length > 0
+  const selected = router.pathname === link.href || router.asPath === link.href
+  return (
+    <li
+      className='cursor-pointer list-none items-center flex mx-2 font-semibold'
+      onMouseOver={() => changeShow(true)}
+      onMouseOut={() => changeShow(false)}>
+      {!hasSubMenu && (
+        <div
+          className={
+            'px-2 h-full whitespace-nowrap 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')
+          }>
+          <SmartLink href={link?.href} target={link?.target}>
+            {link?.icon && <i className={link?.icon} />} {link?.name}
+          </SmartLink>
+        </div>
+      )}
+
+      {/* 包含子選單 */}
+      {hasSubMenu && (
+        <>
+          <div
+            className={
+              'px-2 h-full whitespace-nowrap 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')
+            }>
+            <div>
+              {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>
+          {/* 下拉選單內容 */}
+          <ul
+            className={`${show ? 'visible opacity-100 top-12 ' : 'invisible opacity-0 top-10 '} border-gray-100  bg-white  dark:bg-black dark:border-gray-800 transition-all duration-300 z-20 absolute block drop-shadow-lg `}>
+            {link?.subMenus?.map((sLink, index) => {
+              return (
+                <li
+                  key={index}
+                  className='not:last-child:border-b-0 border-b text-gray-700 dark:text-gray-200  hover:bg-gray-50 dark:hover:bg-gray-900 tracking-widest transition-all duration-200  dark:border-gray-800 py-3 pr-6 pl-3'>
+                  <SmartLink href={sLink.href} target={link?.target}>
+                    <span className='text-xs'>
+                      {link?.icon && <i className={sLink?.icon}> &nbsp; </i>}
+                      {sLink.title}
+                    </span>
+                  </SmartLink>
+                </li>
+              )
+            })}
+          </ul>
+        </>
+      )}
+    </li>
+  )
+}