NodeBB/NodeBB#6178

less/header.less

@@ -295,7 +295,7 @@
 	}
 }
 
-.unread-count:after {
+.unread-count[data-content]:not([data-content=""]):not([data-content="0"]):after {
 	content: attr(data-content);
 	position: absolute;
 	left: 23px;

templates/header.tpl

@@ -51,7 +51,7 @@
 		<section class="menu-section" data-section="notifications">
 			<h3 class="menu-section-title">
 				[[global:header.notifications]]
-				<span class="counter" component="notifications/icon" data-content="0"></span>
+				<span class="counter unread-count" component="notifications/icon" data-content="{unreadCount.notification}"></span>
 			</h3>
 			<ul class="menu-section-list notification-list-mobile" component="notifications/list"></ul>
 			<p class="menu-section-list"><a href="{relative_path}/notifications">[[notifications:see_all]]</a></p>
@@ -63,7 +63,7 @@
 		<section class="menu-section" data-section="chats">
 			<h3 class="menu-section-title">
 				[[global:header.chats]]
-				<i class="counter" component="chat/icon" data-content="0"></i>
+				<i class="counter unread-count" component="chat/icon" data-content="{unreadCount.chat}"></i>
 			</h3>
 			<ul class="menu-section-list chat-list" component="chat/list"></ul>
 		</section>

templates/partials/menu.tpl

@@ -1,10 +1,10 @@
 			<div class="navbar-header">
 				<button type="button" class="navbar-toggle pull-left" id="mobile-menu">
-					<span component="notifications/icon" class="notification-icon fa fa-fw fa-bell-o" data-content="0"></span>
+					<span component="notifications/icon" class="notification-icon fa fa-fw fa-bell-o unread-count" data-content="{unreadCount.notification}"></span>
 					<i class="fa fa-lg fa-bars"></i>
 				</button>
 				<button type="button" class="navbar-toggle hidden" id="mobile-chats">
-					<span component="chat/icon" class="notification-icon fa fa-fw fa-comments" data-content="0"></span>
+					<span component="chat/icon" class="notification-icon fa fa-fw fa-comments unread-count" data-content="{unreadCount.chat}"></span>
 					<i class="fa fa-lg fa-comment-o"></i>
 				</button>
 
@@ -31,7 +31,7 @@
 				<ul id="logged-in-menu" class="nav navbar-nav navbar-right">
 					<li class="notifications dropdown text-center hidden-xs" component="notifications">
 						<a href="{relative_path}/notifications" title="[[global:header.notifications]]" class="dropdown-toggle" data-toggle="dropdown" id="notif_dropdown" data-ajaxify="false" role="button">
-							<i component="notifications/icon" class="fa fa-fw fa-bell-o" data-content="0"></i>
+							<i component="notifications/icon" class="fa fa-fw fa-bell-o unread-count" data-content="{unreadCount.notification}"></i>
 						</a>
 						<ul class="dropdown-menu" aria-labelledby="notif_dropdown">
 							<li>
@@ -49,7 +49,7 @@
 					<!-- IF !config.disableChat -->
 					<li class="chats dropdown">
 						<a class="dropdown-toggle" data-toggle="dropdown" href="{relative_path}/user/{user.userslug}/chats" title="[[global:header.chats]]" id="chat_dropdown" component="chat/dropdown" data-ajaxify="false" role="button">
-							<i component="chat/icon" class="fa fa-comment-o fa-fw"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
+							<i component="chat/icon" class="fa fa-comment-o fa-fw unread-count" data-content="{unreadCount.chat}"></i> <span class="visible-xs-inline">[[global:header.chats]]</span>
 						</a>
 						<ul class="dropdown-menu" aria-labelledby="chat_dropdown">
 							<li>
@@ -226,7 +226,7 @@
 					<li class="{navigation.class}">
 						<a class="navigation-link" href="{navigation.route}" title="{navigation.title}" <!-- IF navigation.id -->id="{navigation.id}"<!-- ENDIF navigation.id --><!-- IF navigation.properties.targetBlank --> target="_blank"<!-- ENDIF navigation.properties.targetBlank -->>
 							<!-- IF navigation.iconClass -->
-							<i class="fa fa-fw {navigation.iconClass}"></i>
+							<i class="fa fa-fw {navigation.iconClass}" data-content="{navigation.content}"></i>
 							<!-- ENDIF navigation.iconClass -->
 
 							<!-- IF navigation.text -->