Add login to ToolsFramework

src/assets/css/constants.scss

@@ -1,6 +1,9 @@
 $origin-color: white;
 $main-color: #4E47BB;
 $secondary-color: #BAB8E5;
+$error-color: #ff4d4f;
+$error-secondary-color: #ff7875;
+$blue-color: #1677ff;
 $active-color: #EBECFFD;
 $background-color: #F5F5F5;
 $font-main-color: #4D4D4D;

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

@@ -13,7 +13,6 @@ body {
   user-select: none;
   transition: all .3s;
   white-space: nowrap;
-  overflow: hidden;
 
   .title {
     display: flex;
@@ -21,6 +20,7 @@ body {
     font-weight: bold;
     padding: 10px 14px;
     color: constants.$main-color;
+    overflow: hidden;
 
     .icon-box {
       display: flex;
@@ -153,12 +153,10 @@ body {
               animation: 0.3s ease;
               @include mixins.unique-keyframes {
                 0% {
-                  display: block;
                   transform: translateX(-10px);
                   opacity: 0;
                 }
                 100% {
-                  display: block;
                   transform: translateX(0);
                   opacity: 1;
                 }
@@ -188,7 +186,7 @@ body {
     padding: 8px 14px;
     color: constants.$main-color;
 
-    .icon-box {
+    .icon-user {
       display: flex;
       justify-content: center;
       align-items: center;
@@ -205,10 +203,27 @@ body {
 
     .text {
       flex: 1;
-      padding-left: 8px;
+      padding-left: 10px;
       font-size: 1.4em;
       color: constants.$font-main-color;
       user-select: text;
+
+      a{
+        color: constants.$main-color;
+        text-decoration: underline;
+      }
+    }
+
+    .icon-exit {
+      font-size: constants.$SIZE_ICON_XS;
+      color: constants.$error-color;
+      padding: 6px 10px;
+      cursor: pointer;
+
+      &:hover {
+        border-radius: 8px;
+        background-color: constants.$background-color;
+      }
     }
   }
 
@@ -234,9 +249,50 @@ body {
     }
 
     .footer {
+      position: relative;
       .text {
         display: none;
       }
+
+      .submenu-exit {
+        display: none;
+        position: absolute;
+        padding-left: 6px;
+        left: 100%;
+
+        .content {
+          padding: 8px;
+          border-radius: 8px;
+          background-color: constants.$origin-color;
+
+          .icon-exit {
+            padding: 4px 8px;
+            &:hover {
+              border-radius: 8px;
+              background-color: constants.$background-color;
+            }
+          }
+        }
+
+        &.hide {
+          display: none!important;
+        }
+      }
+
+      &:hover .submenu-exit {
+        display: block;
+        animation: 0.3s ease;
+        @include mixins.unique-keyframes {
+          0% {
+            transform: translateX(-10px);
+            opacity: 0;
+          }
+          100% {
+            transform: translateX(0);
+            opacity: 1;
+          }
+        }
+      }
     }
   }
 }

src/assets/svg/exit.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path d="M835.669333 554.666667h-473.173333A42.453333 42.453333 0 0 1 320 512a42.666667 42.666667 0 0 1 42.474667-42.666667h473.173333l-161.813333-161.834666a42.666667 42.666667 0 0 1 60.330666-60.330667l234.666667 234.666667a42.666667 42.666667 0 0 1 0 60.330666l-234.666667 234.666667a42.666667 42.666667 0 0 1-60.330666-60.330667L835.669333 554.666667zM554.666667 42.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333C137.578667 128 128 137.578667 128 149.482667v725.034666C128 886.4 137.6 896 149.525333 896H554.666667a42.666667 42.666667 0 1 1 0 85.333333H149.525333A106.816 106.816 0 0 1 42.666667 874.517333V149.482667A106.773333 106.773333 0 0 1 149.525333 42.666667H554.666667z" /></svg>