Merge pull request #356 from storyblok/fix/on-947-app-sidebar-icon

fix(ON-947): app sidebar icon

Author: lisilinhart

src/components/Sidebar/components/ListItem.vue

@@ -23,6 +23,7 @@
         :icon-tooltip-label="iconTooltipLabel"
         :has-separator="hasSeparator"
         :label="label"
+        :image="image"
       />
     </router-link>
     <component
@@ -44,6 +45,7 @@
         :icon-tooltip-label="iconTooltipLabel"
         :has-separator="hasSeparator"
         :label="label"
+        :image="image"
       />
     </component>
     <slot />
@@ -131,6 +133,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    image: {
+      type: String,
+      default: null,
+    },
   },
 
   computed: {

src/components/Sidebar/components/ListItemInner.vue

@@ -1,8 +1,15 @@
 <template>
   <div class="sb-sidebar-link-inner">
     <SbAvatar v-if="hasAvatar" v-bind="avatar" />
+    <img
+      v-else-if="image"
+      :src="image"
+      width="22"
+      height="22"
+      class="sb-sidebar-sidebar-icon"
+    />
 
-    <SbIcon v-else-if="hasIcon" :size="iconSize" :name="icon" />
+    <SbIcon v-else-if="icon" :size="iconSize" :name="icon" />
 
     <div v-if="hasSeparator" class="sb-separator"></div>
 
@@ -77,16 +84,16 @@ export default {
       type: Boolean,
       default: false,
     },
+    image: {
+      type: String,
+      default: null,
+    },
   },
 
   computed: {
     hasAvatar() {
       return this.avatar !== null
     },
-
-    hasIcon() {
-      return this.icon
-    },
   },
 }
 </script>

src/components/Sidebar/sidebar.scss

@@ -158,14 +158,17 @@
 .sb-sidebar-item--child {
   margin: 1px 0 0;
 
+  &:first-of-type {
+    padding-left: 37px;
+  }
+
   &.sb-sidebar-item--active {
     .sb-sidebar-link {
       background-color: #373f57;
     }
   }
 
   .sb-sidebar-link {
-    padding-left: 32px;
 
     &:hover {
       background-color: #373f57;
@@ -193,7 +196,8 @@
     @include activeItemState();
   }
 
-  .sb-icon {
+  .sb-icon,
+  .sb-sidebar-sidebar-icon {
     margin-right: 12px;
   }