changes logo when risezes the page (#6504)

Co-authored-by: Lopez <rodrigo@scclouds.com.br>

ui/public/config.json

@@ -12,6 +12,7 @@
   "footer": "Licensed under the <a href='http://www.apache.org/licenses/' target='_blank'>Apache License</a>, Version 2.0.",
   "loginFooter": "",
   "logo": "assets/logo.svg",
+  "minilogo": "assets/mini-logo.svg",
   "banner": "assets/banner.svg",
   "error": {
     "403": "assets/403.png",
@@ -21,6 +22,7 @@
   "theme": {
     "@layout-mode": "light",
     "@logo-background-color": "#ffffff",
+    "@mini-logo-background-color": "#ffffff",
     "@navigation-background-color": "#ffffff",
     "@project-nav-background-color": "#001529",
     "@project-nav-text-color": "rgba(255, 255, 255, 0.65)",
@@ -43,6 +45,8 @@
     "@box-shadow-base": "0 2px 8px rgba(0, 0, 0, 0.15)",
     "@logo-width": "256px",
     "@logo-height": "64px",
+    "@mini-logo-width": "80px",
+    "@mini-logo-height": "64px",
     "@banner-width": "700px",
     "@banner-height": "110px",
     "@error-width": "256px",

ui/src/components/header/Logo.vue

@@ -16,15 +16,21 @@
 // under the License.
 
 <template>
-  <div class="logo">
+  <div v-if="collapsed && $config.minilogo">
+    <img
+      :style="{
+        width: $config.theme['@mini-logo-width'],
+        height: $config.theme['@mini-logo-height']
+      }"
+      :src="$config.minilogo" />
+  </div>
+  <div v-else-if="$config.logo">
     <img
-      v-if="$config.logo"
       :style="{
         width: $config.theme['@logo-width'],
         height: $config.theme['@logo-height']
       }"
-      :src="$config.logo"
-      class="logo-image" />
+      :src="$config.logo" />
   </div>
 </template>
 
@@ -44,28 +50,12 @@ export default {
       type: Boolean,
       default: true,
       required: false
+    },
+    collapsed: {
+      type: Boolean,
+      default: false,
+      required: false
     }
   }
 }
 </script>
-
-<style type="less" scoped>
-.logo {
-  height: 64px;
-  position: relative;
-  line-height: 64px;
-  -webkit-transition: all .3s;
-  transition: all .3s;
-  overflow: hidden;
-}
-
-.sider.light .logo {
-  box-shadow: 1px 1px 0px 0px #e8e8e8;
-}
-
-.logo-image {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-</style>

ui/src/components/menu/SideMenu.vue

@@ -22,7 +22,8 @@
     collapsible
     v-model:collapsed="isCollapsed"
     :trigger="null">
-    <logo />
+    <logo
+      :collapsed="collapsed"/>
     <s-menu
       :collapsed="isCollapsed"
       :menu="menus"