Add sidebar footer in ToolsFramework.tsx

src/assets/css/pages/tools-framework.scss

@@ -30,6 +30,7 @@ body {
       height: 40px;
       font-size: constants.$SIZE_ICON_SM;
       border-radius: 8px;
+      cursor: pointer;
       span {
         transform: rotateZ(180deg);
         transition: all .3s;
@@ -45,6 +46,7 @@ body {
       font-size: 2em;
       text-align: center;
       letter-spacing: 0.6em;
+      transform: translateX(0.3em);
     }
   }
 
@@ -178,6 +180,40 @@ body {
     opacity: 0.4;
   }
 
+  .footer {
+    display: flex;
+    align-items: center;
+    font-weight: bold;
+    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;
+    }
+  }
+
   &.hide {
     width: 68px;
 

src/pages/ToolsFramework.tsx

@@ -4,15 +4,17 @@ import '@/assets/css/pages/tools-framework.scss'
 import Icon from '@ant-design/icons'
 import { toolsJsonObjects } from '@/router/tools.tsx'
 import HideScrollbar, { HideScrollbarElement } from '@/components/common/HideScrollbar.tsx'
+import { getLocalStorage, setLocalStorage } from '@/utils/common.ts'
 
 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 [hideSidebar, setHideSidebar] = useState(getLocalStorage('hideSidebar') === 'false')
 
     const switchSidebar = () => {
         setHideSidebar(!hideSidebar)
+        setLocalStorage('hideSidebar', hideSidebar ? 'true' : 'false')
         setTimeout(() => {
             hideScrollbarRef.current?.refreshLayout()
         }, 300)
@@ -90,7 +92,7 @@ const ToolsFramework: React.FC = () => {
                                 </div>
                             </li>
                             <li>
-                                <div className={'separate'} />
+                                <div className={'separate'} style={{ marginBottom: 0 }} />
                             </li>
                         </ul>
                         <div className={'toolsMenu'}>
@@ -177,7 +179,13 @@ const ToolsFramework: React.FC = () => {
                             </HideScrollbar>
                         </div>
                     </div>
-                    <div className={'title'}>氮工具</div>
+                    <div className={'separate'} style={{ marginTop: 0, marginBottom: 0 }} />
+                    <div className={'footer'}>
+                        <span className={'icon-box'} onClick={switchSidebar}>
+                            <Icon component={IconFatwebExpand} />
+                        </span>
+                        <span className={'text'}>氮工具</span>
+                    </div>
                 </div>
                 <div className={'right-panel'}></div>
             </FitFullScreen>