[KYUUBI #5634] [UI] Smoother the icon animation on collapsing sidebar

* Renamed type.ts to types.ts as the project uses the naming convention "types.ts" uniformly.
* Removed the title 'Swagger' from the Swagger page.
* Optimizations for Kyuubi icon display when collapsing the sidebar: make the icon and version jump smoother when expanded.

- [ ] Add some test cases that check the changes thoroughly including negative and positive cases if possible

- [ ] Add screenshots for manual tests if appropriate
<img width="312" alt="image" src="https://github.com/apache/kyuubi/assets/13530192/cbe2b502-a47e-471b-ab77-dab822f793da">
<img width="1731" alt="image" src="https://github.com/apache/kyuubi/assets/13530192/61f0ed56-9328-4046-89aa-bdd1ef6f78e6">
<img width="807" alt="image" src="https://github.com/apache/kyuubi/assets/13530192/cb53a342-ce29-4181-aad5-d32bd32f9009">

- [ ] [Run test](https://kyuubi.readthedocs.io/en/master/contributing/code/testing.html#running-tests) locally before make a pull request

Closes #5634 from tongwl/master-20231106-2.

Closes #5634

d2745e3 [weitong] code change
5ac8ce3 [weitong] UI optimize

Lead-authored-by: William Tong <weitong@cisco.com>
Co-authored-by: weitong <weitong@cisco.com>
Signed-off-by: Cheng Pan <chengpan@apache.org>
(cherry picked from commit f8dc869)
Signed-off-by: Cheng Pan <chengpan@apache.org>

kyuubi-server/web-ui/src/layout/components/aside/index.vue

@@ -20,7 +20,7 @@
   <header>
     <img v-if="!isCollapse" src="@/assets/kyuubi-logo.svg" />
     <img v-else class="collapsed-logo" src="@/assets/kyuubi.png" />
-    <pre v-if="!isCollapse">{{ version }}</pre>
+    <span v-if="!isCollapse">{{ version }}</span>
   </header>
   <c-menu :is-collapse="isCollapse" :active-path="activePath" :menus="menus" />
 </template>
@@ -42,37 +42,39 @@
 </script>
 
 <style lang="scss" scoped>
+  $height: 64px;
   header {
+    width: 100%;
     position: absolute;
     top: 0;
     left: 0;
-    height: 64px;
-    padding-left: 16px;
-    line-height: 64px;
+    height: $height;
+    line-height: $height;
+    padding: 0 16px;
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    box-sizing: border-box;
     img {
-      display: inline-block;
       width: 140px;
       height: 50px;
-      top: -10px;
-      position: relative;
-      vertical-align: middle;
+      &.collapsed-logo {
+        width: 40px;
+        height: 40px;
+        position: relative;
+        top: -4px;
+        left: -4px;
+      }
     }
-    pre {
+    span {
+      position: relative;
+      top: 17px;
       font-size: 10px;
-      display: inline-block;
-      width: 100px;
-      margin-top: 20px;
-      text-align: center;
       font-family: 'Myriad Pro', 'Helvetica Neue', Arial, Helvetica, sans-serif;
       color: rgba(255, 255, 255, 0.87);
     }
-    .collapsed-logo {
-      width: 40px;
-      height: 40px;
-      margin-top: 30px;
-    }
   }
   .el-menu {
-    margin-top: 64px;
+    margin-top: $height;
   }
 </style>

kyuubi-server/web-ui/src/views/swagger/index.vue

@@ -18,7 +18,6 @@
 
 <template>
   <main>
-    Swagger
     <div id="swagger-ui" class="swagger-ui"> </div>
   </main>
 </template>