Finish sidebar in ToolsFramework

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

@@ -13,6 +13,7 @@ body {
   user-select: none;
   transition: all .3s;
   white-space: nowrap;
+  overflow: hidden;
 
   .title {
     display: flex;
@@ -184,33 +185,30 @@ body {
     display: flex;
     align-items: center;
     font-weight: bold;
-    padding: 10px 14px;
+    padding: 8px 14px;
     color: constants.$main-color;
 
     .icon-box {
       display: flex;
       justify-content: center;
       align-items: center;
+      margin-left: 4px;
       padding: 10px;
-      width: 40px;
+      width: 32px;
-      height: 40px;
+      height: 32px;
-      font-size: constants.$SIZE_ICON_SM;
+      font-size: constants.$SIZE_ICON_XS;
-      border-radius: 8px;
+      border: 2px constants.$font-secondary-color solid;
-      span {
+      color: constants.$font-secondary-color;
-        transform: rotateZ(180deg);
+      border-radius: 50%;
-        transition: all .3s;
+      cursor: pointer;
-      }
-
-      &:hover {
-        background-color: constants.$background-color;
-      }
     }
 
     .text {
       flex: 1;
-      font-size: 2em;
+      padding-left: 8px;
-      text-align: center;
+      font-size: 1.4em;
-      letter-spacing: 0.6em;
+      color: constants.$font-main-color;
+      user-select: text;
     }
   }
 
@@ -234,6 +232,12 @@ body {
         display: none;
       }
     }
+
+    .footer {
+      .text {
+        display: none;
+      }
+    }
   }
 }
 

src/assets/svg/home.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M116.707556 631.751111a56.888889 56.888889 0 1 1 113.777777 0V910.222222h539.704889V512a56.888889 56.888889 0 1 1 113.777778 0v398.222222a113.777778 113.777778 0 0 1-113.777778 113.777778H230.485333a113.777778 113.777778 0 0 1-113.777777-113.777778v-278.471111z" /><path d="M98.929778 573.070222a56.888889 56.888889 0 0 1-84.081778-76.629333L412.700444 59.904A113.777778 113.777778 0 0 1 578.019556 56.888889l429.710222 438.044444a56.888889 56.888889 0 0 1-81.237334 79.644445L496.810667 136.533333 98.929778 573.098667z" /></svg>

src/assets/svg/user.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M707.797333 304.426667c0-114.218667-93.354667-206.805333-208.512-206.805334-115.157333 0-208.512 92.586667-208.512 206.805334 0 114.218667 93.354667 206.805333 208.512 206.805333 115.2 0 208.512-92.586667 208.512-206.805333m292.053334 656c1.365333 4.437333 2.304 9.088 2.304 13.994666 0 26.88-21.930667 48.725333-49.024 48.725334a48.853333 48.853333 0 0 1-48.981334-48.725334v-0.170666h-1.28c-12.757333-203.904-182.741333-365.482667-391.168-365.482667-208.469333 0-378.453333 161.578667-391.253333 365.482667h-1.109333v0.170666c0 26.88-21.930667 48.725333-48.981334 48.725334A48.853333 48.853333 0 0 1 21.333333 974.421333c0-4.608 0.853333-8.96 2.048-13.226666 14.250667-185.045333 131.882667-341.248 296.149334-410.88C243.2 494.976 193.28 405.589333 193.28 304.426667 193.28 136.32 330.453333 0 499.626667 0c169.216 0 306.346667 136.32 306.346666 304.426667a302.933333 302.933333 0 0 1-118.186666 239.914666c172.202667 66.005333 297.088 225.536 312.064 416.085334" /></svg>

src/components/common/HideScrollbar.tsx

@@ -446,6 +446,7 @@ const HideScrollbar = forwardRef<HideScrollbarElement, HideScrollbarProps>((prop
             window.removeEventListener('resize', windowResizeListener)
         }
     }, [
+        animationTransitionTime,
         horizontalScrollbarLength,
         isPreventAnyScroll,
         isPreventHorizontalScroll,

src/pages/ToolsFramework.tsx

@@ -99,6 +99,7 @@ const ToolsFramework: React.FC = () => {
                             <HideScrollbar
                                 isShowVerticalScrollbar={true}
                                 scrollbarWidth={2}
+                                animationTransitionTime={300}
                                 ref={hideScrollbarRef}
                             >
                                 <ul>
@@ -181,10 +182,10 @@ const ToolsFramework: React.FC = () => {
                     </div>
                     <div className={'separate'} style={{ marginTop: 0, marginBottom: 0 }} />
                     <div className={'footer'}>
-                        <span className={'icon-box'} onClick={switchSidebar}>
+                        <span className={'icon-box'}>
-                            <Icon component={IconFatwebExpand} />
+                            <Icon component={IconFatwebUser} />
                         </span>
-                        <span className={'text'}>氮工具</span>
+                        <span className={'text'}>未登录</span>
                     </div>
                 </div>
                 <div className={'right-panel'}></div>