Added temp menu

client/css/style.css

@@ -65,6 +65,7 @@ button::-moz-focus-inner {
 #sidebar {
 	border-right: 4px solid #bdc3c7;
 	position: absolute;
+	overflow-y: auto;
 	height: 100%;
 	width: 220px;
 }
@@ -74,8 +75,61 @@ button::-moz-focus-inner {
 	padding: 6px 12px;
 	text-transform: uppercase;
 }
-#sidebar button {
+#logo {
-	border-radius: 2px;
+	margin: 30px 0 30px;
+	text-align: center;
+	transition: all .5s;
+}
+#menu,
+#networks {
+	margin: 20px;
+}
+#menu hr {
+	background: #e5e5e5;
+	border: 0;
+	height: 1px;
+	margin: 3px 0;
+}
+#menu.visible .btn {
+	border-color: #7f8c8d;
+	color: #7f8c8d;
+}
+#menu.visible .options {
+	display: block;
+}
+#menu .btn {
+	width: 100%;
+}
+#menu .options {
+	background: #f3f5f5;
+	border-radius: 3px;
+	display: none;
+	margin-top: 15px;
+}
+#menu .opt {
+	color: rgba(52, 73, 94, 0.75);
+	display: block;
+	font-size: 14px;
+	font-weight: bold;
+	padding: 6px 15px 8px;
+	text-align: left;
+	transition: all .25s;
+	width: 100%;
+}
+#menu .opt:hover {
+	background: #e1e4e7;
+	color: #34495e;
+}
+#menu .opt:first-child {
+	border-radius: 3px 3px 0 0;
+	padding-top: 10px;
+}
+#menu .opt:last-child {
+	border-radius: 0 0 3px 3px;
+	padding-bottom: 10px;
+}
+#networks button {
+	border-radius: 3px;
 	color: #1abc9c;
 	display: block;
 	font-size: 15px;
@@ -88,22 +142,14 @@ button::-moz-focus-inner {
 	white-space: nowrap;
 	width: 100%;
 }
-#sidebar button:hover {
+#networks button:hover {
 	background-color: #f1f2f3;
 }
-#sidebar button.active {
+#networks button.active {
 	background-color: #ebedef;
 	color: #526476;
 }
-#logo {
+#networks .network {
-	margin: 30px 0 30px;
-	text-align: center;
-}
-#menu,
-#networks {
-	margin: 20px;
-}
-#networks .network + .network {
 	border-top: 2px solid #ebedef;
 	margin-top: 14px;
 	padding-top: 14px;
@@ -124,17 +170,6 @@ button::-moz-focus-inner {
 #networks .badge:empty {
 	display: none;
 }
-#footer {
-	bottom: 0;
-	position: absolute;
-	width: 100%;
-}
-#footer .btn {
-	background: #fff;
-	display: block;
-	text-align: center;
-	margin: 20px;
-}
 #main {
 	position: absolute;
 	height: 100%;
@@ -258,7 +293,7 @@ button::-moz-focus-inner {
 }
 #chat .time {
 	color: #dee0e2;
-	/*padding: 2px 10px;*/
+	padding: 2px 10px;
 }
 #chat .users {
 	background: #fff;
@@ -289,3 +324,10 @@ button::-moz-focus-inner {
 #chat .count + li .user {
 	padding-top: 8px
 }
+
+@media (max-height: 480px) {
+	#logo {
+		display: block !important;
+		margin-top: -135px;
+	}
+}

client/index.html

@@ -17,24 +17,29 @@
 		<aside id="sidebar">
 			<div id="logo">
 				<a href="<%= homepage %>" target="_blank">
-					<img src="/img/play.svg" width="122" height="122">
+					<img src="/img/play.svg" title="Work in progress" width="122" height="122">
 				</a>
 			</div>
 			<div id="menu">
-				<h2>Shout Client</h2>
+				<button class="btn">
-				<button data-target="#settings">Settings</button>
+					Menu
+				</button>
+				<div class="options">
+					<button class="opt" data-target="#settings">
+						Settings
+					</button>
+					<hr/>
+					<button class="opt" data-target="#sign-out">
+						Sign out
+					</button>
+				</div>
 			</div>
 			<div id="networks"></div>
-			<footer id="footer">
-				<a href="<%= homepage %>" target="_blank" class="btn">
-					<strong><%= name %></strong>
-					<%= version %>
-				</a>
-			</footer>
 		</aside>
 		<div id="main">
 			<div id="windows">
 				<div id="settings" class="window"></div>
+				<div id="sign-out" class="window"></div>
 			</div>
 			<div id="chat"></div>
 		</div>

client/js/chat.js

@@ -93,8 +93,9 @@ $(function() {
 					.find("button[data-target='" + id + "']");
 			} else {
 				target = sidebar
+					.find("#networks")
 					.find("button")
-					.first()
+					.last()
 			}
 			
 			target.trigger("click");
@@ -118,6 +119,9 @@ $(function() {
 	sidebar.on("click", "button", function() {
 		var button = $(this);
 		var target = button.data("target");
+		if (!target) {
+			return;
+		}
 		
 		location.hash = target;
 		
@@ -133,6 +137,10 @@ $(function() {
 			.focus();
 	});
 	
+	sidebar.on("click", "#menu .btn", function() {
+		$("#menu").toggleClass("visible");
+	});
+	
 	chat.on("append", ".messages", function() {
 		var messages = $(this);
 		var id = messages.closest(".window").find(".input").parent().data("target");