Finish sidebar in ToolsFramework

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 {

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>