Temp

src/assets/css/components/common/hide-scrollbar.scss

@@ -17,10 +17,6 @@
     }
   }
 
-  ::-webkit-scrollbar {
-    display: none;
-  }
-
   .scrollbar {
     position: absolute;
     z-index: 1000;

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

@@ -6,10 +6,16 @@ body {
 }
 
 .left-panel {
+  display: flex;
+  flex-direction: column;
   width: 16%;
   background-color: constants.$origin-color;
   user-select: none;
 
+  .hide-scrollbar-selection {
+    height: 100% !important;
+  }
+
   .title {
     font-size: 2em;
     text-align: center;
@@ -61,8 +67,8 @@ body {
           }
 
           .submenu {
-            display: none;
+            display: block;
-            position: fixed;
+            position: absolute;
             padding-left: 20px;
             left: 100%;
             top: 0;
@@ -99,7 +105,9 @@ body {
           }
 
           &:hover {
-            background-color: constants.$background-color;
+            a {
+              background-color: constants.$background-color;
+            }
 
             .submenu {
               display: block;
@@ -119,20 +127,19 @@ body {
             }
           }
         }
-
-        .separate {
-          height: 0;
-          margin: 10px 5px;
-          border: {
-            width: 1px;
-            color: constants.$font-secondary-color;
-            style: solid;
-          };
-          opacity: 0.4;
-        }
       }
     }
   }
+  .separate {
+    height: 0;
+    margin: 10px 5px;
+    border: {
+      width: 1px;
+      color: constants.$font-secondary-color;
+      style: solid;
+    };
+    opacity: 0.4;
+  }
 }
 
 .right-panel {

src/pages/ToolsFramework.tsx

@@ -10,13 +10,11 @@ const ToolsFramework: React.FC = () => {
         <>
             <FitFullScreen className={'flex-horizontal'}>
                 <div className={'left-panel'}>
-                    <HideScrollbar>
+                    <div className={'title'}>氮工具</div>
-                        <div className={'title'}>氮工具</div>
+                    <div style={{ marginTop: '0' }} className={'separate'} />
+                    <HideScrollbar isShowVerticalScrollbar={true} isShowHorizontalScrollbar={true}>
                         <div className={'content'}>
                             <ul>
-                                <li>
-                                    <div style={{ marginTop: '0' }} className={'separate'} />
-                                </li>
                                 <li className={'item'}>
                                     <div className={'menu-bt'}>
                                         <NavLink
@@ -126,6 +124,8 @@ const ToolsFramework: React.FC = () => {
                             </ul>
                         </div>
                     </HideScrollbar>
+
+                    <div className={'title'}>氮工具</div>
                 </div>
                 <div className={'right-panel'}></div>
             </FitFullScreen>