From e32f12d301e3250c053261676de0174d1c08fc15 Mon Sep 17 00:00:00 2001
From: FatttSnake <fatttsnake@gmail.com>
Date: Fri, 13 Oct 2023 17:59:21 +0800
Subject: [PATCH] Finish sidebar in ToolsFramework

---
 src/assets/css/pages/tools-framework.scss | 74 +++++++++++++++++++----
 src/assets/svg/expand.svg                 |  1 +
 src/pages/ToolsFramework.tsx              | 42 +++++++++----
 src/router/tools.tsx                      |  1 +
 4 files changed, 95 insertions(+), 23 deletions(-)
 create mode 100644 src/assets/svg/expand.svg

diff --git a/src/assets/css/pages/tools-framework.scss b/src/assets/css/pages/tools-framework.scss
index 3526d8e..46c8d95 100644
--- a/src/assets/css/pages/tools-framework.scss
+++ b/src/assets/css/pages/tools-framework.scss
@@ -11,14 +11,41 @@ body {
   width: clamp(180px, 20vw, 240px);
   background-color: constants.$origin-color;
   user-select: none;
+  transition: all .3s;
+  white-space: nowrap;
 
   .title {
-    font-size: 2em;
-    text-align: center;
+    display: flex;
+    align-items: center;
     font-weight: bold;
-    letter-spacing: 0.6em;
-    padding: 10px;
+    padding: 10px 14px;
     color: constants.$main-color;
+
+    .icon-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 10px;
+      width: 40px;
+      height: 40px;
+      font-size: constants.$SIZE_ICON_SM;
+      border-radius: 8px;
+      span {
+        transform: rotateZ(180deg);
+        transition: all .3s;
+      }
+
+      &:hover {
+        background-color: constants.$background-color;
+      }
+    }
+
+    .text {
+      flex: 1;
+      font-size: 2em;
+      text-align: center;
+      letter-spacing: 0.6em;
+    }
   }
 
   .content {
@@ -42,26 +69,29 @@ body {
           .menu-bt {
             border-radius: 8px;
             overflow: hidden;
+            height: 40px;
 
             .icon-box {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              padding: 0 10px;
+              width: 40px;
+              height: 40px;
+              font-size: constants.$SIZE_ICON_SM;
               cursor: pointer;
-              width: 26px;
-              height: 26px;
-
-              .icon {
-                margin-right: 16px;
-              }
             }
 
             a {
               display: flex;
-              padding: 8px 16px;
+              align-items: center;
               height: 100%;
               width: 100%;
               transition: all 0.2s;
 
               .text {
                 flex: 1;
+                padding-left: 8px;
               }
 
               &.active {
@@ -147,6 +177,28 @@ body {
     };
     opacity: 0.4;
   }
+
+  &.hide {
+    width: 68px;
+
+    .title {
+      .icon-box {
+        span {
+          transform: rotateZ(360deg);
+          transition: all .3s;
+        }
+      }
+      .text {
+        display: none;
+      }
+    }
+
+    .menu-bt {
+      .text {
+        display: none;
+      }
+    }
+  }
 }
 
 .right-panel {
diff --git a/src/assets/svg/expand.svg b/src/assets/svg/expand.svg
new file mode 100644
index 0000000..95e5060
--- /dev/null
+++ b/src/assets/svg/expand.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 1028 1024" xmlns="http://www.w3.org/2000/svg" width="64" height="64"><path d="M8.533333 192c0-25.6 17.066667-42.666667 34.133334-42.666667h490.666666c21.333333 0 34.133333 17.066667 34.133334 42.666667 0 21.333333-17.066667 42.666667-34.133334 42.666667h-490.666666c-21.333333 0-34.133333-21.333333-34.133334-42.666667z m550.4 213.333333c0 25.6-21.333333 42.666667-46.933333 42.666667h-465.066667c-25.6 0-46.933333-17.066667-46.933333-42.666667 0-21.333333 21.333333-42.666667 46.933333-42.666666h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666666z m-507.733333 256c-25.6 0-46.933333-17.066667-46.933333-42.666666s21.333333-42.666667 46.933333-42.666667h465.066667c25.6 0 46.933333 17.066667 46.933333 42.666667 0 21.333333-21.333333 42.666667-46.933333 42.666666h-465.066667z m507.733333 170.666667c0 25.6-21.333333 42.666667-51.2 42.666667h-452.266666c-29.866667 0-51.2-17.066667-51.2-42.666667s21.333333-42.666667 51.2-42.666667h452.266666c29.866667 0 51.2 17.066667 51.2 42.666667z m140.8-85.333333l221.866667-238.933334-221.866667-238.933333c-17.066667-17.066667-17.066667-51.2 0-68.266667 17.066667-17.066667 46.933333-17.066667 64 0l251.733334 273.066667c17.066667 17.066667 17.066667 51.2 0 68.266667l-251.733334 273.066666c-17.066667 17.066667-46.933333 17.066667-64 0-17.066667-17.066667-17.066667-46.933333 0-68.266666z" /></svg>
\ No newline at end of file
diff --git a/src/pages/ToolsFramework.tsx b/src/pages/ToolsFramework.tsx
index d69d129..f9e94bb 100644
--- a/src/pages/ToolsFramework.tsx
+++ b/src/pages/ToolsFramework.tsx
@@ -3,11 +3,20 @@ import FitFullScreen from '@/components/common/FitFullScreen'
 import '@/assets/css/pages/tools-framework.scss'
 import Icon from '@ant-design/icons'
 import { toolsJsonObjects } from '@/router/tools.tsx'
-import HideScrollbar from '@/components/common/HideScrollbar.tsx'
+import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar.tsx'
 
 const ToolsFramework: React.FC = () => {
+    const hideScrollbarRef = useRef<HideScrollbarElement>(null)
     const [submenuTop, setSubmenuTop] = useState(0)
     const [submenuLeft, setSubmenuLeft] = useState(0)
+    const [hideSidebar, setHideSidebar] = useState(false)
+
+    const switchSidebar = () => {
+        setHideSidebar(!hideSidebar)
+        setTimeout(() => {
+            hideScrollbarRef.current?.refreshLayout()
+        }, 300)
+    }
 
     const showSubmenu = (e: React.MouseEvent) => {
         const parentElement = e.currentTarget.parentElement
@@ -29,8 +38,13 @@ const ToolsFramework: React.FC = () => {
     return (
         <>
             <FitFullScreen className={'flex-horizontal'}>
-                <div className={'left-panel'}>
-                    <div className={'title'}>氮工具</div>
+                <div className={`left-panel${hideSidebar ? ' hide' : ''}`}>
+                    <div className={'title'}>
+                        <span className={'icon-box'} onClick={switchSidebar}>
+                            <Icon component={IconFatwebExpand} />
+                        </span>
+                        <span className={'text'}>氮工具</span>
+                    </div>
                     <div style={{ marginTop: '0' }} className={'separate'} />
                     <div className={'content'}>
                         <ul>
@@ -44,10 +58,12 @@ const ToolsFramework: React.FC = () => {
                                         }
                                     >
                                         <div className={'icon-box'}>
-                                            <Icon
-                                                className={'icon'}
-                                                component={toolsJsonObjects[0].icon}
-                                            />
+                                            {toolsJsonObjects[0].icon ? (
+                                                <Icon
+                                                    className={'icon'}
+                                                    component={toolsJsonObjects[0].icon}
+                                                />
+                                            ) : undefined}
                                         </div>
                                         <span className={'text'}>{toolsJsonObjects[0].name}</span>
                                     </NavLink>
@@ -62,10 +78,12 @@ const ToolsFramework: React.FC = () => {
                                         }
                                     >
                                         <div className={'icon-box'}>
-                                            <Icon
-                                                className={'icon'}
-                                                component={toolsJsonObjects[1].icon}
-                                            />
+                                            {toolsJsonObjects[1].icon ? (
+                                                <Icon
+                                                    className={'icon'}
+                                                    component={toolsJsonObjects[1].icon}
+                                                />
+                                            ) : undefined}
                                         </div>
                                         <span className={'text'}>{toolsJsonObjects[1].name}</span>
                                     </NavLink>
@@ -78,8 +96,8 @@ const ToolsFramework: React.FC = () => {
                         <div className={'toolsMenu'}>
                             <HideScrollbar
                                 isShowVerticalScrollbar={true}
-                                isShowHorizontalScrollbar={true}
                                 scrollbarWidth={2}
+                                ref={hideScrollbarRef}
                             >
                                 <ul>
                                     {toolsJsonObjects.map((tool) => {
diff --git a/src/router/tools.tsx b/src/router/tools.tsx
index b6c658b..a98995c 100644
--- a/src/router/tools.tsx
+++ b/src/router/tools.tsx
@@ -7,6 +7,7 @@ export const toolsJsonObjects: ToolsJsonObject[] = [
         path: '',
         id: 'tools',
         component: React.lazy(() => import('@/pages/tools')),
+        icon: React.lazy(() => import('~icons/fatweb/logo.jsx')),
         name: '主页',
         menu: true,
         auth: false