feat: add top navbar for front page

web/src/assets/css/chat-plus.styl

@@ -10,35 +10,26 @@ $borderColor = #4676d0;
     // left side
 
     .el-aside {
-      background-color: $sideBgColor;
-      height 100vh
-
-      .title-box {
-        padding: 6px 10px;
-        display: flex;
-        color: #ffffff;
-        font-size: 20px;
-
-        span {
-          padding-top: 5px;
-          padding-left: 10px;
-        }
-      }
+      //background-color: $sideBgColor;
+      padding 10px
+      width var(--el-aside-width, 320px)
 
       .chat-list {
         display: flex
         flex-flow: column
-        background-color: #28292A
-        border-top: 1px solid #2F3032
-        border-right: 1px solid #2F3032
+        //background-color: $sideBgColor
+        border-radius 10px
+        padding 10px 0
 
         .search-box {
           flex-wrap: wrap
-          padding: 10px 15px;
-          //background-color #343540
+          padding: 10px 0;
 
-          .el-input__wrapper {
-            background-color: #363535;
+          .search-input {
+            --el-input-bg-color: #363535
+            --el-input-border-color: #464545
+            --el-input-focus-border-color: #47fff1
+            --el-input-hover-border-color: #2DA39A
             box-shadow: none
           }
         }
@@ -52,9 +43,6 @@ $borderColor = #4676d0;
         }
 
         .content {
-          //display flex
-          //flex-wrap: wrap;
-          //flex-direction column
           width: 100%
           overflow-y: scroll
 
@@ -65,14 +53,17 @@ $borderColor = #4676d0;
             padding: 8px 12px
             //border-bottom: 1px solid #3c3c3c
             cursor: pointer
+            border: 1px solid #3c3c3c
+            margin-bottom 6px
+            border-radius 5px
 
             &:hover {
               background-color #343540
             }
 
             .avatar {
-              width: 28px;
-              height: 28px;
+              width: 32px;
+              height: 32px;
               border-radius: 50%;
             }
 
@@ -96,13 +87,17 @@ $borderColor = #4676d0;
               text-overflow: ellipsis;
             }
 
-            .btn {
-              display none
+
+            .chat-opt {
               position: absolute;
               right: 2px;
               top: 16px;
               color #ffffff
 
+              .el-dropdown-link {
+                color #ffffff
+              }
+
               .el-icon {
                 margin-right 8px;
               }
@@ -111,10 +106,7 @@ $borderColor = #4676d0;
 
           .chat-list-item.active {
             background-color: #343540;
-
-            .btn {
-              display inline
-            }
+            border-color #21aa93
           }
         }
       }
@@ -126,37 +118,6 @@ $borderColor = #4676d0;
         align-items: center;
         padding 0 20px 10px 20px;
         border-top 1px solid #3c3c3c;
-
-        .user-info {
-          width 100%
-          padding-top 10px;
-
-          .el-dropdown-link {
-            width 100%;
-            cursor: pointer
-            display flex
-
-            .el-image {
-              width: 20px;
-              height: 20px;
-              border-radius: 5px;
-            }
-
-            .username {
-              display flex
-              line-height 22px;
-              width 230px;
-              padding-left 10px;
-
-            }
-
-            .el-icon {
-              color: #cccccc;
-              line-height 24px;
-            }
-          }
-
-        }
       }
     }
 
@@ -210,11 +171,12 @@ $borderColor = #4676d0;
         }
       }
 
-      .right-box {
+
+      .chat-box {
         min-width: 0;
         flex: 1;
-        background-color: #ffffff
-        border-left: 1px solid #4f4f4f
+        background-color: var(--el-bg-color)
+        color var(--el-text-color-primary)
 
         #container {
           overflow: hidden;