diff --git a/browser/components/TagListItem.js b/browser/components/TagListItem.js
index 2625412a..ebef7df4 100644
--- a/browser/components/TagListItem.js
+++ b/browser/components/TagListItem.js
@@ -12,10 +12,11 @@ import CSSModules from 'browser/lib/CSSModules'
* @param {bool} isActive
*/
-const TagListItem = ({name, handleClickTagListItem, isActive}) => (
+const TagListItem = ({name, handleClickTagListItem, isActive, count}) => (
)
diff --git a/browser/components/TagListItem.styl b/browser/components/TagListItem.styl
index cd3a5387..b35b30cf 100644
--- a/browser/components/TagListItem.styl
+++ b/browser/components/TagListItem.styl
@@ -48,6 +48,9 @@
overflow hidden
text-overflow ellipsis
+.tagList-item-count
+ padding 0 3px
+
body[data-theme="white"]
.tagList-item
color $ui-inactive-text-color
@@ -63,6 +66,8 @@ body[data-theme="white"]
color $ui-text-color
&:hover
background-color alpha($ui-button--active-backgroundColor, 60%)
+ .tagList-item-count
+ color $ui-text-color
body[data-theme="dark"]
.tagList-item
@@ -81,4 +86,6 @@ body[data-theme="dark"]
background-color alpha($ui-dark-button--active-backgroundColor, 50%)
&:hover
color $ui-dark-text-color
- background-color alpha($ui-dark-button--active-backgroundColor, 50%)
\ No newline at end of file
+ background-color alpha($ui-dark-button--active-backgroundColor, 50%)
+ .tagList-item-count
+ color $ui-dark-button--active-color
diff --git a/browser/main/SideNav/index.js b/browser/main/SideNav/index.js
index 2120220b..6d05e37b 100644
--- a/browser/main/SideNav/index.js
+++ b/browser/main/SideNav/index.js
@@ -117,18 +117,21 @@ class SideNav extends React.Component {
tagListComponent () {
const { data, location } = this.props
- const tagList = data.tagNoteMap.map((tag, key) => {
- return key
+ const tagList = data.tagNoteMap.map((tag, name) => {
+ return { name, size: tag.size }
})
return (
- tagList.map(tag => (
-
- ))
+ tagList.map(tag => {
+ return (
+
+ )
+ })
)
}