submenu first pass - chats menu done

less/header.less

@@ -1,3 +1,105 @@
+#menu, .header {
+	#notif-list {
+		overflow-x: hidden;
+		overflow-y: auto;
+		max-height: 250px;
+		padding: 0;
+
+		li {
+			font-size: 12px;
+			width: 300px;
+			text-align: left;
+			margin-bottom: 5px;
+			margin-right: 5px;
+			margin-left: 5px;
+			list-style-type: none;
+			padding: 0.5em;
+			clear: both;
+
+			img {
+				max-width: 32px;
+				max-height: 32px;
+				float: left;
+				border-radius: 50%;
+			}
+
+			a {
+				color: @text-color;
+				white-space: normal;
+				overflow: hidden;
+				margin: 0;
+				// padding: 3px 5px 3px 20px;
+				text-overflow: ellipsis;
+
+				.text {
+					margin-left: 40px;
+					margin-right: 50px;
+					display: block;
+					min-height: 32px;
+				}
+			}
+
+			&.unread {
+				.bg-variant(@state-warning-bg);
+
+				.mark-read:after {
+					content: "\f111";
+				}
+
+				.mark-read:hover:after {
+					content: "\f10c";
+				}
+			}
+
+			.mark-read {
+				color: @text-muted;
+
+				&:after {
+					font-family: "FontAwesome";
+					content: "\f10c";
+					padding: 4px 1rem;
+					position: relative;
+					top: 1px;
+				}
+
+				&:hover {
+					color: @gray-dark;
+					.pointer;
+
+					&:after {
+						content: "\f111";
+					}
+				}
+			}
+		}
+	}
+	
+	.chat-list {
+		#notif-list;
+
+		li {
+			.pointer;
+			width: 200px;
+
+			a {
+				white-space: nowrap;
+				line-height: 30px;
+
+				img {
+					width: 32px;
+					margin-right: 1em;
+					border-radius: 50%;
+				}
+			}
+
+			&.no_active a {
+				text-align: center;
+				white-space: normal;
+			}
+		}
+	}
+}
+
 .header {
 
 	[component="navbar/title"] {
@@ -108,81 +210,6 @@
 		}
 	}
 
-	#notif-list {
-		overflow-x: hidden;
-		overflow-y: auto;
-		max-height: 250px;
-		padding: 0;
-
-		li {
-			font-size: 12px;
-			width: 300px;
-			text-align: left;
-			margin-bottom: 5px;
-			margin-right: 5px;
-			margin-left: 5px;
-			list-style-type: none;
-			padding: 0.5em;
-			clear: both;
-
-			img {
-				max-width: 32px;
-				max-height: 32px;
-				float: left;
-				border-radius: 50%;
-			}
-
-			a {
-				color: @text-color;
-				white-space: normal;
-				overflow: hidden;
-				margin: 0;
-				// padding: 3px 5px 3px 20px;
-				text-overflow: ellipsis;
-
-				.text {
-					margin-left: 40px;
-					margin-right: 50px;
-					display: block;
-					min-height: 32px;
-				}
-			}
-
-			&.unread {
-				.bg-variant(@state-warning-bg);
-
-				.mark-read:after {
-					content: "\f111";
-				}
-
-				.mark-read:hover:after {
-					content: "\f10c";
-				}
-			}
-
-			.mark-read {
-				color: @text-muted;
-
-				&:after {
-					font-family: "FontAwesome";
-					content: "\f10c";
-					padding: 4px 1rem;
-					position: relative;
-					top: 1px;
-				}
-
-				&:hover {
-					color: @gray-dark;
-					.pointer;
-
-					&:after {
-						content: "\f111";
-					}
-				}
-			}
-		}
-	}
-
 	.notif-dropdown-link {
 		// margin-top: 1em;
 		border-top: 1px solid rgba(163, 163, 163, 0.5);
@@ -194,34 +221,8 @@
 			font-weight: 600;
 		}
 	}
-
-	.chat-list {
-		#notif-list;
-
-		li {
-			.pointer;
-			width: 200px;
-
-			a {
-				white-space: nowrap;
-				line-height: 30px;
-
-				img {
-					width: 32px;
-					margin-right: 1em;
-					border-radius: 50%;
-				}
-			}
-
-			&.no_active a {
-				text-align: center;
-				white-space: normal;
-			}
-		}
-	}
 }
 
-
 .breadcrumb {
 	li {
 		max-width: 100%;

less/mobile.less

@@ -30,6 +30,14 @@
 		a:hover {
 			text-decoration: underline;
 		}
+
+		.chat-list li {
+			width: auto;
+
+			a {
+				color: white;
+			}
+		}
 	}
 
 	.menu-header-title {
@@ -101,4 +109,23 @@
 		overflow-y: hidden;
 		height: 100%;
 	}
+
+	.menu-submenu {
+		text-align: center;
+		padding-top: 15px;
+
+		span {
+			margin: 5px;
+		}
+
+		img {
+			width: 45px;
+			height: 45px;
+			border-radius: 50%;
+		}
+
+		&.active img {
+			border: 2px solid white;
+		}
+	}
 }

lib/persona.js

@@ -197,6 +197,23 @@ $(document).ready(function() {
 			});
 		});
 
-		$('#mobile-navigation').html($('#main-nav').html());
+		$('#menu [data-section="navigation"] ul').html($('#main-nav').html());
+
+		$('#menu [data-submenu]').each(function() {
+			var submenuEl = $(this),
+				submenu = submenuEl.attr('data-submenu');
+
+			submenuEl.on('click', function() {
+				$('#menu [data-section]').hide();
+				$('#menu [data-section="' + submenu + '"]').show();
+
+				if (submenu === 'chats') {
+					require(['chat'], function(chat) {
+						chat.loadChats($('#menu [data-section="chats"] ul'));
+					});
+				}
+				
+			});
+		});
 	}
 });

templates/header.tpl

@@ -39,9 +39,21 @@
 
 <body>
 	<nav id="menu" class="visible-xs visible-sm">
-		<section class="menu-section">
+		<section class="menu-submenu">
+			<span class="img-round pointer"><img data-submenu="navigation" src="{user.picture}"/></span>
+			<span class="img-round pointer"><img data-submenu="profile" src="{user.picture}"/></span>
+			<span class="img-round pointer"><img data-submenu="chats" src="{user.picture}"/></span>
+			<span class="img-round pointer"><img data-submenu="notifications" src="{user.picture}"/></span>
+		</section>
+
+		<section class="menu-section" data-section="chats">
+			<h3 class="menu-section-title">[[global:header.chats]]</h3>
+			<ul class="menu-section-list chat-list"></ul>
+		</section>
+
+		<section class="menu-section" data-section="navigation">
 			<h3 class="menu-section-title">[[global:header.navigation]]</h3>
-			<ul class="menu-section-list" id="mobile-navigation"></ul>
+			<ul class="menu-section-list"></ul>
 		</section>
 	</nav>