closes #363

less/mobile.less

@@ -220,6 +220,10 @@
 				text-decoration: none;
 			}
 		}
+
+		.user-status {
+			padding-left: 40px;
+		}
 	}
 
 	.slideout-open,

lib/persona.js

@@ -238,7 +238,6 @@ $(document).ready(function() {
 			$('#menu [data-section="navigation"] ul').html($('#main-nav').html() + ($('#search-menu').html() || '') + ($('#logged-out-menu').html() || ''));
 
 			$('#user-control-list').children().clone(true, true).appendTo($('#menu [data-section="profile"] ul'));
-			$('#menu [data-section="profile"] ul').find('[component="user/status"]').remove();
 
 			socket.on('event:user_status_change', function(data) {
 				if (parseInt(data.uid, 10) === app.user.uid) {

templates/partials/menu.tpl

@@ -71,7 +71,7 @@
 							<img component="header/userpicture" src="{user.picture}" alt="{user.username}"/>
 							<!-- ELSE -->
 							<span component="header/usericon" class="user-icon" style="background-color: {user.icon:bgColor}; display: block;">{user.icon:text}</span>
-							<!-- ENDIF user.picture --> 
+							<!-- ENDIF user.picture -->
 							<span id="user-header-name" class="visible-xs-inline">{user.username}</span>
 						</label>
 						<input type="checkbox" class="hidden" id="user-control-list-check" aria-hidden="true">
@@ -84,22 +84,22 @@
 							<li role="presentation" class="divider"></li>
 							<li>
 								<a href="#" class="user-status" data-status="online">
-									<i class="fa fa-fw fa-circle status online"></i><span> [[global:online]]</span>
+									<i class="fa fa-fw fa-circle status online"></i><span <!-- IF user.online -->class="bold"<!-- ENDIF user.online -->> [[global:online]]</span>
 								</a>
 							</li>
 							<li>
 								<a href="#" class="user-status" data-status="away">
-									<i class="fa fa-fw fa-circle status away"></i><span> [[global:away]]</span>
+									<i class="fa fa-fw fa-circle status away"></i><span <!-- IF user.away -->class="bold"<!-- ENDIF user.away -->> [[global:away]]</span>
 								</a>
 							</li>
 							<li>
 								<a href="#" class="user-status" data-status="dnd">
-									<i class="fa fa-fw fa-circle status dnd"></i><span> [[global:dnd]]</span>
+									<i class="fa fa-fw fa-circle status dnd"></i><span <!-- IF user.dnd -->class="bold"<!-- ENDIF user.dnd -->> [[global:dnd]]</span>
 								</a>
 							</li>
 							<li>
 								<a href="#" class="user-status" data-status="offline">
-									<i class="fa fa-fw fa-circle status offline"></i><span> [[global:invisible]]</span>
+									<i class="fa fa-fw fa-circle status offline"></i><span <!-- IF user.offline -->class="bold"<!-- ENDIF user.offline -->> [[global:invisible]]</span>
 								</a>
 							</li>
 							<li role="presentation" class="divider"></li>