fix: sidebar logo

frontend/src/components/Logo/Logo.vue

@@ -5,7 +5,6 @@ import logo from '@/assets/img/logo.png'</script>
     <div class="logo">
         <img :src="logo" alt="logo"/>
         <p class="text">Nginx UI</p>
-        <div class="clear"></div>
     </div>
 </template>
 
@@ -19,27 +18,23 @@ import logo from '@/assets/img/logo.png'</script>
 }
 
 .logo {
-    padding: 8px 25px;
     -webkit-box-shadow: 1px 1px 0 0 #e8e8e8;
     box-shadow: 1px 1px 0 0 #e8e8e8;
     transition: all 0.3s;
     height: 64px;
     width: 100%;
     overflow: hidden;
-    display: inline-block;
     background-color: #ffffff;
 
     img {
         height: 46px;
-        float: left;
     }
 
-    .text {
+    p.text {
-        float: left;
+        margin: 0;
         font-size: 22px;
         line-height: 48px;
         height: 48px;
-        display: inline-block;
     }
 }
 </style>

frontend/src/layouts/SideBar.vue

@@ -105,6 +105,16 @@ const visible = computed(() => {
 .sidebar {
     position: sticky;
     top: 0;
+
+    .logo {
+        display: inline-flex;
+        justify-content: center;
+        align-items: center;
+
+        img {
+            margin-left: -18px;
+        }
+    }
 }
 
 .ant-layout-sider-collapsed .logo {
@@ -114,4 +124,17 @@ const visible = computed(() => {
 .ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
     border-right: unset;
 }
+
+.ant-layout-sider-collapsed {
+    .logo {
+        img {
+            margin-left: 0;
+        }
+
+
+        .text {
+            display: none;
+        }
+    }
+}
 </style>