You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by ha...@apache.org on 2022/07/13 04:31:37 UTC

[cloudstack] branch main updated: changes logo when risezes the page (#6504)

This is an automated email from the ASF dual-hosted git repository.

harikrishna pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/cloudstack.git


The following commit(s) were added to refs/heads/main by this push:
     new 7a1401a111 changes logo when risezes the page (#6504)
7a1401a111 is described below

commit 7a1401a111db4f9ed5d12def42dd210b59d9bd6c
Author: Rodrigo D. Lopez <19...@users.noreply.github.com>
AuthorDate: Wed Jul 13 01:31:30 2022 -0300

    changes logo when risezes the page (#6504)
    
    Co-authored-by: Lopez <ro...@scclouds.com.br>
---
 ui/public/assets/mini-logo.svg      | 221 ++++++++++++++++++++++++++++++++++++
 ui/public/config.json               |   4 +
 ui/src/components/header/Logo.vue   |  40 +++----
 ui/src/components/menu/SideMenu.vue |   3 +-
 4 files changed, 242 insertions(+), 26 deletions(-)

diff --git a/ui/public/assets/mini-logo.svg b/ui/public/assets/mini-logo.svg
new file mode 100644
index 0000000000..72b4df7224
--- /dev/null
+++ b/ui/public/assets/mini-logo.svg
@@ -0,0 +1,221 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="640" height="480" viewBox="0 0 640 480" xml:space="preserve">
+<desc>Created with Fabric.js 3.6.3</desc>
+<defs>
+</defs>
+<g transform="matrix(7.93 0 0 7.93 1012.4 242.6)"  >
+<g style=""   >
+		<g transform="matrix(1 0 0 1 -94.02 8.74)" id="path98"  >
+<path style="stroke: rgb(255,255,255); stroke-width: 1.89999998; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(255,255,255); fill-rule: nonzero; opacity: 1;"  transform=" translate(-33.98, -339.69)" d="m 24.076585 353.85243 c -3.737293 -0.43539 -7.03116 -2.47076 -8.345309 -5.15678 c -0.479828 -0.98073 -0.607487 -1.58528 -0.678732 -3.21422 c -0.07696 -1.75969 -0.02611 -2.13447 0.413697 -3.04903 c 1.456842 -3.029 [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -99.72 9.26)" id="path22" clip-path="url(#CLIPPATH_7)"  >
+<clipPath id="CLIPPATH_7" >
+	<path transform="matrix(1 0 0 1 353.37 -338.26) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(42,165,220); fill-rule: nonzero; opacity: 1;"  transform=" translate(-65.97, -82.06)" d="m 0 0 c 0 0 9.63 -7.223 31.054 -5.803 c 0 0 3.756 0.065 6.57 4.261 c 0 0 2.303 5.23 -7.628 2.955 c 0 0 -12.195 -1.746 -23.595 4.163 c 0 0 -23.961 13.35 -27.992 33.429 c 0 0 -7.314 19.798 4.423 40.527 c 0 0 7.256 12.282 15.439 17.959 c  [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -81.79 13.66)" id="path26" clip-path="url(#CLIPPATH_8)"  >
+<clipPath id="CLIPPATH_8" >
+	<path transform="matrix(1 0 0 1 258.16 -314.88) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(42,165,220); fill-rule: nonzero; opacity: 1;"  transform=" translate(27.35, -43.93)" d="m 0 0 c 0 0 40.635 35.561 2.852 71.862 c 0 0 2.075 10.187 -2.852 13.706 c 0 0 -1.964 5.001 -15.484 -1.482 c 0 0 -11.299 -3.704 -21.115 5.001 l -11.668 -9.446 c 0 0 -15.743 -7.038 -23.151 -24.263 c 0 0 -5.001 -15.557 0 -21.484 c 0 0 3.70 [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -95.27 -15.01)" id="path30" clip-path="url(#CLIPPATH_9)"  >
+<clipPath id="CLIPPATH_9" >
+	<path transform="matrix(1 0 0 1 329.75 -467.17) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(42,165,220); fill-rule: nonzero; opacity: 1;"  transform=" translate(-0.99, -40.86)" d="m 0 0 c 0 0 -0.249 14.112 4.075 26.088 c 0 0 2.24 6.106 10.125 18.028 c 1.244 1.881 5.186 6.914 6.421 11.483 c 0 0 6.668 20.99 -17.225 24.319 c 0 0 -7.613 1.355 -12.593 -2.648 c -3.15 -2.532 -6.113 -4.014 -8.398 -4.631 c 0 0 -11.298 -3. [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -72.71 -9.36)" id="path34" clip-path="url(#CLIPPATH_10)"  >
+<clipPath id="CLIPPATH_10" >
+	<path transform="matrix(1 0 0 1 209.94 -437.14) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(42,165,220); fill-rule: nonzero; opacity: 1;"  transform=" translate(-68.21, -43.3)" d="m 0 0 c 0 0 16.616 4.073 19.333 17.902 l -23.708 1.604 c 0 0 -6.419 2.254 -9.877 13.166 c 0 0 -14.323 7.702 -13.335 18.815 c 0 0 2.222 13.829 14.076 15.805 c 0 0 12.364 3.056 14.879 -16.7 c 0 0 5.817 -16.732 -5.519 -17.92 c 0 0 -2.446 - [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -74.68 -14.8)" id="path38" clip-path="url(#CLIPPATH_11)"  >
+<clipPath id="CLIPPATH_11" >
+	<path transform="matrix(1 0 0 1 220.37 -466.01) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(185,225,246); fill-rule: nonzero; opacity: 1;"  transform=" translate(8.9, 33.67)" d="m 0 0 c 0 0 9.816 6.112 13.521 -0.556 c 0 0 -1.112 -9.075 -0.556 -16.484 c 0 0 1.111 -8.705 8.149 -13.706 c 0 0 6.668 -7.408 0 -14.075 c 0 0 -20.002 -14.077 -23.707 -22.596 c 0 0 -8.89 -12.595 -23.337 -2.964 c 0 0 -18.891 11.483 -15.558 2 [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -83.83 -16.84)" id="path42" clip-path="url(#CLIPPATH_12)"  >
+<clipPath id="CLIPPATH_12" >
+	<path transform="matrix(1 0 0 1 269 -476.84) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(185,225,246); fill-rule: nonzero; opacity: 1;"  transform=" translate(5.49, 6.18)" d="m 0 0 c 0 0 -3.982 -5.834 -4.167 -14.539 c 0 0 -6.112 0.926 -6.668 6.76 c 0 0 -1.574 8.427 5.927 9.817 c 0 0 3.797 0.926 4.908 -2.038" stroke-linecap="round" />
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -68.9 -16.13)" id="path46" clip-path="url(#CLIPPATH_13)"  >
+<clipPath id="CLIPPATH_13" >
+	<path transform="matrix(1 0 0 1 189.68 -473.08) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(185,225,246); fill-rule: nonzero; opacity: 1;"  transform=" translate(-4.56, 3.36)" d="m 0 0 c 0 0 4.074 2.778 6.853 0 c 0 0 4.147 -4.047 1.759 -7.501 c 0 0 -1.759 -1.019 -2.871 0 c 0 0 -2.338 2.892 -4.815 4.537 c 0 0 -1.759 1.205 -0.926 2.964" stroke-linecap="round" />
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -87.79 -10.38)" id="path50" clip-path="url(#CLIPPATH_14)"  >
+<clipPath id="CLIPPATH_14" >
+	<path transform="matrix(1 0 0 1 290.01 -442.54) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(185,225,246); fill-rule: nonzero; opacity: 1;"  transform=" translate(9.46, 1.22)" d="m 0 0 c 0 0 -1.852 9.446 -8.026 12.039 c 0 0 -4.445 1.172 -7.779 -2.655 c 0 0 -6.112 -6.236 -4.074 -13.829 c 0 0 3.519 -8.336 12.841 -10.064 c 0 0 5.248 -1.605 8.273 6.36 c 0 0 0.761 2.479 -1.235 8.149" stroke-linecap="round" />
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -80.54 0.12)" id="path54" clip-path="url(#CLIPPATH_15)"  >
+<clipPath id="CLIPPATH_15" >
+	<path transform="matrix(1 0 0 1 251.51 -386.77) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(185,225,246); fill-rule: nonzero; opacity: 1;"  transform=" translate(-20.71, -1.67)" d="m 0 0 c 0 0 12.055 4.899 26.917 22.966 c 0 0 4.074 5.681 9.755 4.199 c 0 0 8.274 -1.975 2.963 -15.187 c 0 0 -10.371 -32.722 -35.066 -36.055 c 0 0 0 17.163 -4.569 24.077" stroke-linecap="round" />
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -96.65 15.22)" id="path58" clip-path="url(#CLIPPATH_16)"  >
+<clipPath id="CLIPPATH_16" >
+	<path transform="matrix(1 0 0 1 337.08 -306.58) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(185,225,246); fill-rule: nonzero; opacity: 1;"  transform=" translate(-27.25, 45.06)" d="m 0 0 c 0 0 -43.462 8.149 -58.773 -28.152 c 0 0 -13.089 -43.217 40.252 -57.045 c 0 0 38.277 -6.174 85.939 1.481 c 0 0 55.415 7.161 66.108 15.311 c 0 0 -4.864 -18.522 -56.477 -26.671 c 0 0 -75.32 -10.866 -100.756 -5.927 c 0 0 3.704 -0.4 [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -77.18 -17.07)" id="path62" clip-path="url(#CLIPPATH_17)"  >
+<clipPath id="CLIPPATH_17" >
+	<path transform="matrix(1 0 0 1 233.65 -478.11) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(42,165,220); fill-rule: nonzero; opacity: 1;"  transform=" translate(7.87, -2.27)" d="m 0 0 c 0 0 -0.51 5.094 -7.501 5.51 c 0 0 -6.622 1.297 -8.243 -5.047 c 0 0 0.602 -2.5 3.381 -0.787 c 0 0 -0.009 3.725 5 3.936 c 0 0 4.769 -0.875 5.279 -4.535 c 0 0 1.945 -0.744 2.084 0.923" stroke-linecap="round" />
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -72.36 -17.08)" id="path66" clip-path="url(#CLIPPATH_18)"  >
+<clipPath id="CLIPPATH_18" >
+	<path transform="matrix(1 0 0 1 208.09 -478.13) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(42,165,220); fill-rule: nonzero; opacity: 1;"  transform=" translate(-7.06, -3.05)" d="m 0 0 c 0 0 0.371 5.186 4.677 6.159 c 0 0 6.251 2.013 8.983 -3.589 c 0 0 0.972 -2.27 0.092 -2.895 c 0 0 -1.956 -0.717 -2.546 2.686 c 0 0 -1.575 3.079 -4.7 2.431 c 0 0 -2.778 -0.301 -3.473 -3.217 C 3.033 1.575 2.895 -1.504 0 0" stroke-lin [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -74.41 -11.19)" id="path70" clip-path="url(#CLIPPATH_19)"  >
+<clipPath id="CLIPPATH_19" >
+	<path transform="matrix(1 0 0 1 218.98 -446.85) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(42,165,220); fill-rule: nonzero; opacity: 1;"  transform=" translate(-19.66, 10.92)" d="m 0 0 c 1.418 0.874 3.46 0.125 4.756 -0.666 c 1.408 -0.859 2.941 -1.667 4.432 -2.374 c 2.923 -1.383 5.96 -2.278 9.27 -2.27 c 1.718 0.005 3.547 -0.174 5.233 0.063 c 1.407 0.199 2.852 0.354 4.257 0.497 c 1.707 0.172 3.483 0.529 5.035 1.34 [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -75.08 -14.6)" id="path74" clip-path="url(#CLIPPATH_20)"  >
+<clipPath id="CLIPPATH_20" >
+	<path transform="matrix(1 0 0 1 222.51 -464.98) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(42,165,220); fill-rule: nonzero; opacity: 1;"  transform=" translate(1.97, 0)" d="m 0 0 c 0 -1.036 -0.881 -1.875 -1.968 -1.875 c -1.087 0 -1.968 0.839 -1.968 1.875 c 0 1.036 0.881 1.875 1.968 1.875 C -0.881 1.875 0 1.036 0 0" stroke-linecap="round" />
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -73.56 -14.66)" id="path78" clip-path="url(#CLIPPATH_21)"  >
+<clipPath id="CLIPPATH_21" >
+	<path transform="matrix(1 0 0 1 214.45 -465.31) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(42,165,220); fill-rule: nonzero; opacity: 1;"  transform=" translate(1.97, 0)" d="m 0 0 c 0 -1.036 -0.881 -1.875 -1.967 -1.875 c -1.087 0 -1.968 0.839 -1.968 1.875 c 0 1.036 0.881 1.875 1.968 1.875 C -0.881 1.875 0 1.036 0 0" stroke-linecap="round" />
+</g>
+		<g transform="matrix(0.19 0 0 -0.19 -57.75 -12.77)" id="path82" clip-path="url(#CLIPPATH_22)"  >
+<clipPath id="CLIPPATH_22" >
+	<path transform="matrix(1 0 0 1 130.45 -455.23) translate(-1000, -1000)" id="path16" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(185,225,246); fill-rule: nonzero; opacity: 1;"  transform=" translate(-12.36, -6.88)" d="m 0 0 c 0 0 -2.887 5.018 0.984 8.986 c 0 0 5.068 1.737 5.206 5.665 c 0 0 -1.398 6.182 1.491 8.342 c 0 0 4.789 3.286 5.406 -2.412 c 0 0 1.044 -5.282 -0.676 -8.613 c 0 0 7.063 1.813 10.257 0 c 3.196 -1.814 4.302 -11.503 1.415 -16.522 c 0 [...]
+</g>
+		<g transform="matrix(0.3 0 0 0.33 32.47 3.85)" id="image96" clip-path="url(#CLIPPATH_23)"  >
+<clipPath id="CLIPPATH_23" >
+	<path transform="matrix(0.63 0 0 -0.63 20.37 24.23) translate(-1246.73, -1283.37)" id="path88" d="m 1317.766 1308.723 v -15.945 h -0.107 c -1.215 2.153 -3.975 4.082 -8.06 4.082 v 0 c -6.512 0 -12.028 -5.46 -11.973 -14.345 v 0 c 0 -8.111 4.967 -13.573 11.419 -13.573 v 0 c 4.36 0 7.62 2.261 9.107 5.244 v 0 h 0.109 l 0.218 -4.637 h 4.368 c -0.17 1.822 -0.227 4.523 -0.227 6.898 v 0 v 32.276 z m -15.23 -25.985 c 0 5.904 2.981 10.317 8 10.317 v 0 c 3.645 0 6.291 -2.535 7.01 -5.628 v 0 c 0.164 [...]
+</clipPath>
+	<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAABHNCSVQICAgIfAhkiAAACP9JREFUeJzt2MGNQjEQBUEbkSdaAgMRqbnvEST8oasieNJcWjPHGGsAAJBx2j0AAIDPEoAAADECEAAgRgACAMQIQACAGAEIABAjAAEAYgQgAECMAAQAiBGAAAAxAhAAIEYAAgDECEAAgBgBCAAQIwABAGIEIABAjAAEAIgRgAAAMQIQAC [...]
+</g>
+		<g transform="matrix(0.3 0 0 0.33 32.3 3.5)" id="image110" clip-path="url(#CLIPPATH_24)"  >
+<clipPath id="CLIPPATH_24" >
+	<path transform="matrix(0.63 0 0 -0.64 32 2.5) translate(-1264.43, -1319.37)" id="path102" d="m 892.093 1318.587 h 744.665 v 1.564 H 892.093 Z" stroke-linecap="round" />
+</clipPath>
+	<image style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;"  xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAoAAAAHgCAYAAAA10dzkAAAABHNCSVQICAgIfAhkiAAACOVJREFUeJzt2LENg1AUBMGH5ZIRRSD3DB0gOeEHO1PBhavbZuYaAAAyPqsHAADwLgEIABAjAAEAYgQgAECMAAQAiBGAAAAxAhAAIEYAAgDECEAAgBgBCAAQIwABAGIEIABAjAAEAIgRgAAAMQIQACBGAAIAxAhAAIAYAQgAECMAAQBiBC [...]
+</g>
+		<g transform="matrix(1.1 0 0 1.2 116.91 -11.48)" style="" id="text114"  >
+		<text xml:space="preserve" font-family="'Avenir LT Std 55 Roman'" font-size="2.21677637" font-style="normal" font-weight="bold" style="stroke: none; stroke-width: 0.17386755; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(128,129,129); fill-rule: nonzero; opacity: 1; white-space: pre;" ><tspan x="-1.79" y="0.7" >TM</tspan></text>
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 -41.8 -4.49)" id="path126" clip-path="url(#CLIPPATH_25)"  >
+<clipPath id="CLIPPATH_25" >
+	<path transform="matrix(1.13 0 0 1.04 90.64 -423.37) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(152,152,152); fill-rule: nonzero; opacity: 1;"  transform=" translate(5.97, -3.06)" d="m 0 0 c -1.158 0 -2.603 -0.051 -4.338 -0.153 c -1.736 -0.102 -3.404 -0.392 -5.002 -0.868 c -1.599 -0.477 -2.96 -1.191 -4.083 -2.144 c -1.122 -0.953 -1.684 -2.28 -1.684 -3.98 c 0 -1.837 0.781 -3.2 2.348 -4.083 c 1.564 -0.885 3.197 -1.327  [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 -30.12 -2.19)" id="path130" clip-path="url(#CLIPPATH_26)"  >
+<clipPath id="CLIPPATH_26" >
+	<path transform="matrix(1.13 0 0 1.04 29.86 -412.35) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(152,152,152); fill-rule: nonzero; opacity: 1;"  transform=" translate(-12.86, 11.02)" d="m 0 0 c 0 -3.743 1.072 -6.772 3.215 -9.084 c 2.144 -2.314 5.155 -3.471 9.034 -3.471 c 3.879 0 6.89 1.157 9.033 3.471 c 2.144 2.312 3.216 5.341 3.216 9.084 c 0 3.742 -1.072 6.771 -3.216 9.084 c -2.143 2.313 -5.154 3.471 -9.033 3.471 c - [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 -19.31 -4.49)" id="path134" clip-path="url(#CLIPPATH_27)"  >
+<clipPath id="CLIPPATH_27" >
+	<path transform="matrix(1.13 0 0 1.04 -26.43 -423.37) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(152,152,152); fill-rule: nonzero; opacity: 1;"  transform=" translate(5.97, -3.06)" d="m 0 0 c -1.158 0 -2.603 -0.051 -4.338 -0.153 c -1.736 -0.102 -3.404 -0.392 -5.002 -0.868 c -1.599 -0.477 -2.96 -1.191 -4.083 -2.144 c -1.122 -0.953 -1.684 -2.28 -1.684 -3.98 c 0 -1.837 0.781 -3.2 2.348 -4.083 c 1.564 -0.885 3.197 -1.327  [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 -9.04 -4.49)" id="path138" clip-path="url(#CLIPPATH_28)"  >
+<clipPath id="CLIPPATH_28" >
+	<path transform="matrix(1.13 0 0 1.04 -79.92 -423.37) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(152,152,152); fill-rule: nonzero; opacity: 1;"  transform=" translate(12.5, 8.78)" d="m 0 0 c -0.75 1.088 -1.804 1.99 -3.164 2.705 c -1.361 0.714 -2.824 1.072 -4.389 1.072 c -3.879 0 -6.89 -1.158 -9.033 -3.471 c -2.144 -2.314 -3.216 -5.343 -3.216 -9.084 c 0 -3.743 1.072 -6.772 3.216 -9.085 c 2.143 -2.314 5.154 -3.47 9.033  [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 0.75 -7.36)" id="path142" clip-path="url(#CLIPPATH_29)"  >
+<clipPath id="CLIPPATH_29" >
+	<path transform="matrix(1.13 0 0 1.04 -130.9 -437.15) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(152,152,152); fill-rule: nonzero; opacity: 1;"  transform=" translate(-8.57, 38.58)" d="m 0 0 v -34.297 h 0.204 c 0.34 0.952 0.919 1.904 1.735 2.859 c 0.818 0.952 1.802 1.801 2.96 2.551 c 1.157 0.748 2.518 1.361 4.083 1.837 c 1.566 0.476 3.267 0.715 5.105 0.715 c 3.878 0 7.008 -0.597 9.391 -1.786 c 2.38 -1.191 4.235 -2.842 [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 11.8 -4.49)" id="path146" clip-path="url(#CLIPPATH_30)"  >
+<clipPath id="CLIPPATH_30" >
+	<path transform="matrix(1.13 0 0 1.04 -188.47 -423.37) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(152,152,152); fill-rule: nonzero; opacity: 1;"  transform=" translate(10.1, 5.61)" d="m 0 0 c 0.067 2.585 -0.783 4.797 -2.551 6.635 c -1.771 1.837 -4.051 2.756 -6.84 2.756 c -1.701 0 -3.199 -0.273 -4.491 -0.817 C -15.176 8.028 -16.28 7.332 -17.199 6.481 C -18.117 5.63 -18.832 4.644 -19.342 3.521 C -19.854 2.398 -20.143 1.2 [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 22.32 -4.49)" id="path150" clip-path="url(#CLIPPATH_31)"  >
+<clipPath id="CLIPPATH_31" >
+	<path transform="matrix(1.13 0 0 1.04 -243.23 -423.37) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,175,216); fill-rule: nonzero; opacity: 1;"  transform=" translate(12.5, 8.78)" d="m 0 0 c -0.75 1.088 -1.804 1.99 -3.164 2.705 c -1.361 0.714 -2.824 1.072 -4.389 1.072 c -3.879 0 -6.89 -1.158 -9.033 -3.471 c -2.144 -2.314 -3.216 -5.343 -3.216 -9.084 c 0 -3.743 1.072 -6.772 3.216 -9.085 c 2.143 -2.314 5.154 -3.47 9.033  [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 29.03 -7.36)" id="path152" clip-path="url(#CLIPPATH_32)"  >
+<clipPath id="CLIPPATH_32" >
+	<path transform="matrix(1.13 0 0 1.04 -278.19 -437.16) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,175,216); fill-rule: nonzero; opacity: 1;"  transform=" translate(-1196.73, -1375.43)" d="m 1189.071 1414.018 h 15.311 v -77.167 h -15.311 z" stroke-linecap="round" />
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 37.37 -4.49)" id="path156" clip-path="url(#CLIPPATH_33)"  >
+<clipPath id="CLIPPATH_33" >
+	<path transform="matrix(1.13 0 0 1.04 -321.57 -423.37) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,175,216); fill-rule: nonzero; opacity: 1;"  transform=" translate(-12.25, 0)" d="m 0 0 c 0 -3.743 1.071 -6.772 3.215 -9.084 c 2.143 -2.314 5.154 -3.471 9.033 -3.471 c 3.879 0 6.891 1.157 9.034 3.471 c 2.144 2.312 3.215 5.341 3.215 9.084 c 0 3.742 -1.071 6.771 -3.215 9.084 c -2.143 2.313 -5.155 3.471 -9.034 3.471 c -3.8 [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 48.77 -4.36)" id="path160" clip-path="url(#CLIPPATH_34)"  >
+<clipPath id="CLIPPATH_34" >
+	<path transform="matrix(1.13 0 0 1.04 -380.97 -422.76) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,175,216); fill-rule: nonzero; opacity: 1;"  transform=" translate(23.89, -24.19)" d="m 0 0 h -14.698 v 6.737 h -0.204 c -0.545 -0.954 -1.243 -1.906 -2.093 -2.858 c -0.852 -0.954 -1.888 -1.804 -3.113 -2.552 c -1.225 -0.75 -2.621 -1.361 -4.185 -1.837 c -1.566 -0.476 -3.267 -0.715 -5.103 -0.715 c -3.879 0 -7.028 0.597 -9. [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 60.06 -7.23)" id="path164" clip-path="url(#CLIPPATH_35)"  >
+<clipPath id="CLIPPATH_35" >
+	<path transform="matrix(1.13 0 0 1.04 -439.77 -436.54) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,175,216); fill-rule: nonzero; opacity: 1;"  transform=" translate(12.86, -13.17)" d="m 0 0 c 0 3.742 -1.071 6.771 -3.215 9.084 c -2.143 2.313 -5.155 3.471 -9.034 3.471 c -3.878 0 -6.89 -1.158 -9.033 -3.471 c -2.144 -2.313 -3.215 -5.342 -3.215 -9.084 c 0 -3.743 1.071 -6.772 3.215 -9.084 c 2.143 -2.314 5.155 -3.471 9.033 [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 70.89 -4.49)" id="path168" clip-path="url(#CLIPPATH_36)"  >
+<clipPath id="CLIPPATH_36" >
+	<path transform="matrix(1.13 0 0 1.04 -496.16 -423.37) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,175,216); fill-rule: nonzero; opacity: 1;"  transform=" translate(9.85, 10.21)" d="m 0 0 c -2.246 2.79 -5.206 4.185 -8.881 4.185 c -1.293 0 -2.552 -0.307 -3.776 -0.919 c -1.226 -0.612 -1.838 -1.668 -1.838 -3.164 c 0 -1.225 0.629 -2.128 1.889 -2.705 c 1.258 -0.579 2.858 -1.089 4.797 -1.531 c 1.939 -0.444 4.014 -0.919 6. [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 79.06 -5.89)" id="path172" clip-path="url(#CLIPPATH_37)"  >
+<clipPath id="CLIPPATH_37" >
+	<path transform="matrix(1.13 0 0 1.04 -538.68 -430.11) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,175,216); fill-rule: nonzero; opacity: 1;"  transform=" translate(19.29, 5.82)" d="m 0 0 h -13.474 v -16.536 c 0 -1.362 0.067 -2.603 0.204 -3.726 c 0.136 -1.122 0.442 -2.092 0.919 -2.909 c 0.475 -0.816 1.207 -1.446 2.195 -1.888 c 0.985 -0.443 2.297 -0.664 3.929 -0.664 c 0.817 0 1.889 0.085 3.215 0.256 c 1.327 0.169 2.3 [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 88.16 -4.49)" id="path176" clip-path="url(#CLIPPATH_38)"  >
+<clipPath id="CLIPPATH_38" >
+	<path transform="matrix(1.13 0 0 1.04 -586.09 -423.37) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,175,216); fill-rule: nonzero; opacity: 1;"  transform=" translate(5.97, -3.06)" d="m 0 0 c -1.158 0 -2.603 -0.051 -4.338 -0.153 c -1.735 -0.102 -3.404 -0.392 -5.002 -0.868 c -1.599 -0.477 -2.96 -1.191 -4.083 -2.144 c -1.123 -0.953 -1.684 -2.28 -1.684 -3.98 c 0 -1.837 0.782 -3.2 2.347 -4.083 c 1.566 -0.885 3.198 -1.327  [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 98.44 -4.49)" id="path180" clip-path="url(#CLIPPATH_39)"  >
+<clipPath id="CLIPPATH_39" >
+	<path transform="matrix(1.13 0 0 1.04 -639.57 -423.37) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,175,216); fill-rule: nonzero; opacity: 1;"  transform=" translate(12.5, 8.78)" d="m 0 0 c -0.75 1.088 -1.804 1.99 -3.164 2.705 c -1.362 0.714 -2.825 1.072 -4.39 1.072 c -3.879 0 -6.889 -1.158 -9.033 -3.471 c -2.143 -2.314 -3.216 -5.343 -3.216 -9.084 c 0 -3.743 1.073 -6.772 3.216 -9.085 c 2.144 -2.314 5.154 -3.47 9.033  [...]
+</g>
+		<g transform="matrix(0.19 0 0 -0.21 108.59 -7.36)" id="path184" clip-path="url(#CLIPPATH_40)"  >
+<clipPath id="CLIPPATH_40" >
+	<path transform="matrix(1.13 0 0 1.04 -692.45 -437.15) translate(-1000, -1000)" id="path120" d="M 0 2000 H 2000 V 0 H 0 Z" stroke-linecap="round" />
+</clipPath>
+<path style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: rgb(105,175,216); fill-rule: nonzero; opacity: 1;"  transform=" translate(-25.77, 38.58)" d="m 0 0 h 15.311 v -47.158 l 16.944 19.598 h 18.781 l -19.7 -22.354 l 20.211 -27.253 H 32.255 l -16.74 25.109 H 15.311 V -77.167 H 0 Z" stroke-linecap="round" />
+</g>
+</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/ui/public/config.json b/ui/public/config.json
index 912cbf2a31..82d7c9adff 100644
--- a/ui/public/config.json
+++ b/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",
diff --git a/ui/src/components/header/Logo.vue b/ui/src/components/header/Logo.vue
index ca67959230..d474b6303f 100644
--- a/ui/src/components/header/Logo.vue
+++ b/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>
diff --git a/ui/src/components/menu/SideMenu.vue b/ui/src/components/menu/SideMenu.vue
index a3fc875dca..d370f6e1c8 100644
--- a/ui/src/components/menu/SideMenu.vue
+++ b/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"