From 49df2deb31e7e030d7cb93d15c85ec57a2eab9fe Mon Sep 17 00:00:00 2001
From: Angelina Filippova <linakirsanova@gmail.com>
Date: Tue, 14 Jul 2020 18:56:59 +0300
Subject: [PATCH] Add badge for displating open reports count

---
 src/views/layout/components/Sidebar/Item.vue | 35 +++++++++-----------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/src/views/layout/components/Sidebar/Item.vue b/src/views/layout/components/Sidebar/Item.vue
index 03e3b89f..a19a4288 100644
--- a/src/views/layout/components/Sidebar/Item.vue
+++ b/src/views/layout/components/Sidebar/Item.vue
@@ -1,7 +1,14 @@
+<template>
+  <span>
+    <svg-icon :icon-class="icon"/>
+    <span slot="title">{{ title }}</span>
+    <el-badge :value="count" type="primary" class="count-badge" />
+  </span>
+</template>
+
 <script>
 export default {
-  name: 'MenuItem',
-  functional: true,
+  name: 'Item',
   props: {
     count: {
       type: String,
@@ -15,23 +22,13 @@ export default {
       type: String,
       default: ''
     }
-  },
-  render(h, context) {
-    const { count, icon, title } = context.props
-    const vnodes = []
-
-    if (icon) {
-      vnodes.push(<svg-icon icon-class={icon}/>)
-    }
-
-    if (title) {
-      vnodes.push(<span slot='title'>{(title)} </span>)
-    }
-
-    if (count) {
-      vnodes.push(<span slot='title'>({(count)})</span>)
-    }
-    return vnodes
   }
 }
 </script>
+
+<style rel='stylesheet/scss' lang='scss' scoped>
+.count-badge {
+  margin-left: 5px;
+  height: 48px;
+}
+</style>