refine sidebar

ZhiShuYun · Sep 30, 2023 · 813fd94 · 813fd94
1 parent 9b851f6
commit 813fd94
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 7 deletions.
diff --git a/src/components/common/Navigator.vue b/src/components/common/Navigator.vue
@@ -2,8 +2,8 @@
   <div class="sidebar">
     <div class="top">
       <div v-for="(link, linkIndex) in links" :key="linkIndex" class="link">
-        <el-button @click="$router.push(link.route)">
-          <font-awesome-icon icon="fa-solid fa-question" />
+        <el-button class="button" @click="$router.push(link.route)">
+          <font-awesome-icon :icon="link.icon" />
         </el-button>
       </div>
     </div>
@@ -30,13 +30,13 @@ export default defineComponent({
           route: {
             name: ROUTE_CHAT_INDEX
           },
-          icon: 'fa-question'
+          icon: 'fa-regular fa-comment'
         },
         {
           route: {
             name: 'midjourney-index'
           },
-          icon: 'fa-question'
+          icon: 'fa-solid fa-palette'
         }
       ]
     };
@@ -48,10 +48,28 @@ export default defineComponent({
 .sidebar {
   display: flex;
   flex-direction: column;
-  align-items: flex-end;
+  align-items: center;
   .top {
     display: flex;
     flex-direction: column;
+    padding-top: 10px;
+    .link {
+      width: 40px;
+      height: 40px;
+      margin-bottom: 10px;
+      // border-radius: 5px;
+      .button {
+        width: 40px;
+        height: 40px;
+        border-radius: 10px;
+        border: none;
+        background-color: var(--el-bg-color-page);
+        &:hover,
+        &:focus {
+          background-color: var(--el-button-hover-bg-color);
+        }
+      }
+    }
   }
   .bottom {
     display: flex;

diff --git a/src/layouts/Main.vue b/src/layouts/Main.vue
@@ -29,9 +29,10 @@ export default defineComponent({
   display: flex;
   flex-direction: row;
   .left {
-    width: 50px;
+    width: 60px;
     height: 100%;
-    background-color: aqua;
+    // background-color: aqua;
+    border-right: 1px solid var(--el-border-color);
   }
   .main {
     height: 100%;

diff --git a/src/plugins/font-awesome.ts b/src/plugins/font-awesome.ts
@@ -9,6 +9,7 @@ import {
 import {
   faMicrophone as faSolidMicrophone,
   faStop as faSolidStop,
+  faPalette as faSolidPalette,
   faBars as faSolidBars,
   faGear as faSolidGear,
   faRotateRight as faSolidRotateRight,
@@ -45,3 +46,4 @@ library.add(faRegularPaperPlane);
 library.add(faRegularComment);
 library.add(faSolidArrowRightFromBracket);
 library.add(faSolidTrash);
+library.add(faSolidPalette);