gitbook-collapse

themes/gitbook/components/NavPostItem.js

@@ -0,0 +1,39 @@
+import BlogPostCard from './BlogPostCard'
+import React, { useState } from 'react'
+import Collapse from '@/components/Collapse'
+
+/**
+ * 导航列表
+ * @param posts 所有文章
+ * @param tags 所有标签
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const NavPostItem = (props) => {
+  const { group } = props
+  const [isOpen, changeIsOpen] = useState(group?.selected)
+
+  const toggleOpenSubMenu = () => {
+    changeIsOpen(!isOpen)
+  }
+
+  if (group.category) {
+    return <>
+            <div
+                onClick={toggleOpenSubMenu}
+                className='flex justify-between text-sm font-sans cursor-pointer p-2 hover:bg-gray-50 rounded-md dark:hover:bg-gray-600' key={group.category}>
+                <span>{group.category}</span>
+                <div className='inline-flex items-center select-none pointer-events-none '><i className={`px-2 fas fa-chevron-left transition-all duration-200 ${isOpen ? '-rotate-90' : ''}`}></i></div>
+            </div>
+            <Collapse isOpen={isOpen} onHeightChange={props.onHeightChange}>
+                {group.items?.map(post => (<div key={post.id} className='ml-3 border-l'>
+                    <BlogPostCard className='text-sm ml-3' post={post} /></div>))
+                }
+            </Collapse>
+        </>
+  } else {
+    return <div> {group.items?.map(post => (<BlogPostCard key={post.id} post={post} className='text-sm' />))}</div>
+  }
+}
+
+export default NavPostItem