diff --git a/components/CollapseLeft.js b/components/CollapseLeft.js
new file mode 100644
index 00000000000..56d86525c74
--- /dev/null
+++ b/components/CollapseLeft.js
@@ -0,0 +1,38 @@
+import React, { useEffect, useRef } from 'react'
+
+const Collapse = props => {
+ const collapseRef = useRef(null)
+ const collapseSection = element => {
+ const sectionWidth = element.scrollWidth
+ requestAnimationFrame(function () {
+ element.style.width = sectionWidth + 'px'
+ requestAnimationFrame(function () {
+ element.style.width = 0 + 'px'
+ })
+ })
+ }
+ const expandSection = element => {
+ const sectionWidth = element.scrollWidth
+ element.style.width = sectionWidth + 'px'
+ const clearTime = setTimeout(() => {
+ element.style.width = 'auto'
+ }, 400)
+ clearTimeout(clearTime)
+ }
+ useEffect(() => {
+ const element = collapseRef.current
+ if (props.isOpen) {
+ expandSection(element)
+ } else {
+ collapseSection(element)
+ }
+ }, [props.isOpen])
+ return (
+
+ {props.children}
+
+ )
+}
+Collapse.defaultProps = { isOpen: false }
+
+export default Collapse
diff --git a/components/SideBarDrawer.js b/components/SideBarDrawer.js
new file mode 100644
index 00000000000..e6db94a5550
--- /dev/null
+++ b/components/SideBarDrawer.js
@@ -0,0 +1,55 @@
+import { useRouter } from 'next/router'
+import React from 'react'
+
+/**
+ * 侧边栏抽屉面板，可以从侧面拉出
+ * @returns {JSX.Element}
+ * @constructor
+ */
+const SideBarDrawer = ({ children, isOpen, onOpen, onClose, className }) => {
+ const router = useRouter()
+ React.useEffect(() => {
+ // 页面渲染后删除hidden属性
+ // const sideBarWrapperElement = document.getElementById('sidebar-wrapper')
+ // sideBarWrapperElement?.classList?.remove('hidden')
+
+ const sideBarDrawerRouteListener = () => {
+ switchSideDrawerVisible(false)
+ }
+ router.events.on('routeChangeComplete', sideBarDrawerRouteListener)
+ return () => {
+ router.events.off('routeChangeComplete', sideBarDrawerRouteListener)
+ }
+ }, [router.events])
+
+ // 点击按钮更改侧边抽屉状态
+ const switchSideDrawerVisible = (showStatus) => {
+ if (window) {
+ if (showStatus) {
+ onOpen()
+ } else {
+ onClose()
+ }
+ const sideBarDrawer = window.document.getElementById('sidebar-drawer')
+ const sideBarDrawerBackground = window.document.getElementById('sidebar-drawer-background')
+
+ if (showStatus) {
+ sideBarDrawer.classList.replace('-ml-80', 'ml-0')
+ sideBarDrawerBackground.classList.replace('hidden', 'block')
+ } else {
+ sideBarDrawer.classList.replace('ml-0', '-ml-80')
+ sideBarDrawerBackground.classList.replace('block', 'hidden')
+ }
+ }
+ }
+
+ return