Bugreport918 vertical spacing in side menu (#926)

* fixed vertical spacing issue in firefox

* removed unnecessary important tag from css

* bugfix - sidebar only shows icons if collapsed

* fixed styling for hover sidebar

* removed unnecessary height property + linting

* fixed item-wrapper styling

* linting fix

src/layout/components/Sidebar/Item.vue

@@ -1,11 +1,10 @@
 <template>
   <el-row class="item-wrapper">
-    <el-col :span="3">
+    <el-col :span="3" :style="iconMargin">
       <i v-if="icon.includes('el-icon')" class="icon sub-el-icon" />
       <svg-icon v-else :icon-class="icon" />
     </el-col>
     <el-col :span="21">
-
       <p class="item-title">{{ title }}</p>
     </el-col>
   </el-row>
@@ -22,25 +21,48 @@ export default {
     title: {
       type: String,
       default: ''
+    },
+    addMargin: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    iconMargin() {
+      if (this.addMargin) {
+        return 'margin-left: -20px;'
+      }
     }
   }
 }
 </script>
 
 <style scoped>
-.sub-el-icon {
-  width: 1em;
-  height: 1em;
-}
+  .sub-el-icon {
+    width: 1em;
+    height: 1em;
+  }
 
-.item-wrapper {
-  white-space: break-spaces;
-  line-height: 20px;
-  height: auto;
-  margin: 18px 23px 18px 0;
-}
+  .item-wrapper {
+    white-space: break-spaces;
+    line-height: 20px;
+    height: auto;
+    padding: 18px 23px 18px 0;
+  }
 
-.item-title {
-  margin: 0 0 0 7px;
-}
+  .item-title {
+    margin: 0 0 0 7px;
+  }
+</style>
+
+<style>
+  .el-row::before {
+    display: block;
+    height: 0;
+  }
+
+  .el-row::after {
+    display: block;
+    height: 0;
+  }
 </style>

src/layout/components/Sidebar/SidebarItem.vue

@@ -11,12 +11,14 @@
           <el-tooltip v-if="!sidebar.opened && !isNest" effect="dark" :content="onlyOneChild.meta.title" placement="right">
             <item
               :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
+              :add-margin="true"
             />
           </el-tooltip>
           <item
             v-else
             :icon="onlyOneChild.meta.icon || (item.meta && item.meta.icon)"
             :title="generateTitle(onlyOneChild.meta.title)"
+            :is-collapsed="isCollapsed"
           />
         </el-menu-item>
       </app-link>
@@ -24,7 +26,13 @@
 
     <el-submenu v-else ref="subMenu" :index="resolvePath(item.path)" popper-append-to-body>
       <template slot="title">
-        <item v-if="sidebar.opened" :icon="item.meta && item.meta.icon" :title="generateTitle(item.meta.title)" />
+        <item
+          v-if="sidebar.opened"
+          :icon="item.meta && item.meta.icon"
+          :title="generateTitle(item.meta.title)"
+          :is-collapsed="isCollapsed"
+          :has-child-items="true"
+        />
         <el-tooltip v-else effect="dark" :content="item.meta.title" placement="top-start">
           <item v-if="item.meta && !isNest" :icon="item.meta && item.meta.icon" />
         </el-tooltip>
@@ -67,6 +75,10 @@ export default {
     basePath: {
       type: String,
       default: ''
+    },
+    isCollapsed: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -78,13 +90,7 @@ export default {
   computed: {
     ...mapGetters([
       'sidebar'
-    ]),
-    isCollapse() {
-      if (this.sidebar.opened) {
-        return 'right'
-      }
-      return 'top'
-    }
+    ])
   },
   methods: {
     hasOneShowingChild(children = [], parent) {

src/layout/components/Sidebar/index.vue

@@ -12,7 +12,13 @@
         :collapse-transition="false"
         mode="vertical"
       >
-        <sidebar-item v-for="route in menu" :key="route.path" :item="route" :base-path="route.path" />
+        <sidebar-item
+          v-for="route in menu"
+          :key="route.path"
+          :item="route"
+          :base-path="route.path"
+          :is-collapsed="!sidebar.opened"
+        />
       </el-menu>
     </el-scrollbar>
   </div>

src/styles/sidebar.scss

@@ -114,11 +114,9 @@
     }
 
     .submenu-title-noDropdown {
-      padding: 0 !important;
       position: relative;
 
       .el-tooltip {
-        padding: 0 !important;
 
         .svg-icon {
           margin-left: 20px;