move chat dropdown to its own template

less/header.less

@@ -79,18 +79,13 @@
 			width: 200px;
 
 			a {
+				display: block;
 				line-height: 30px;
 
 				position: relative;
 
-				i {
-					position: absolute;
-					left: -26px;
-				}
-
-				img, .user-icon {
-					.user-icon-style(@border-radius: 50%);
-					margin-right: 1em;
+				.avatar {
+					margin-right: 1rem;
 				}
 			}
 

templates/partials/chat_dropdown.tpl

@@ -0,0 +1,23 @@
+<!-- IF rooms.length -->
+<!-- BEGIN rooms -->
+<li class="<!-- IF ../unread -->unread<!-- ENDIF ../unread -->" data-roomId="{../roomId}">
+	<a data-ajaxify="false">
+		<!-- IF lastUser -->
+		<!-- IF ../lastUser.picture -->
+		<img class="avatar avatar-md avatar-rounded" src="{../lastUser.picture}" title="{../lastUser.username}" />
+		<!-- ELSE -->
+		<div class="avatar avatar-md avatar-rounded" style="background-color: {../lastUser.icon:bgColor}">{../lastUser.icon:text}</div>
+		<!-- ENDIF ../lastUser.picture -->
+		<!-- ENDIF lastUser -->
+		
+		<!-- IF lastUser -->
+		{../usernames}
+		<!-- ELSE -->
+		[[modules:chat.no-users-in-room]]
+		<!-- ENDIF lastUser -->
+	</a>
+</li>
+<!-- END rooms -->
+<!-- ELSE -->
+<li class="no_active"><a href="#">No active chats</a></li>
+<!-- ENDIF rooms.length -->