From 3b6e6db02f25efb6944a332d4cdce7b3cf517b8b Mon Sep 17 00:00:00 2001
From: Julian Lam <julian@nodebb.org>
Date: Fri, 26 Oct 2018 16:17:13 -0400
Subject: [PATCH] feat: show spinner when loading sidebar, complements
 8ebc7dcc1d0c7d7e500ba886affb5c3bc75bcf6b

---
 less/header.less            | 21 +++++++++++++++++++++
 templates/partials/menu.tpl |  2 +-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/less/header.less b/less/header.less
index eaba22a..ef8f528 100644
--- a/less/header.less
+++ b/less/header.less
@@ -467,3 +467,24 @@ html[data-dir="rtl"] {
 		text-align: right;
 	}
 }
+
+#mobile-menu:focus i.fa-bars {
+	-webkit-animation: fa-spin 2s infinite linear;
+	animation: fa-spin 2s infinite linear;
+
+	&::before {
+		font-family: "FontAwesome";
+		content: "\f110";
+	}
+}
+
+@keyframes fa-spin {
+	0% {
+		-webkit-transform: rotate(0deg);
+		transform: rotate(0deg);
+	}
+	100% {
+		-webkit-transform: rotate(359deg);
+		transform: rotate(359deg);
+	}
+}
\ No newline at end of file
diff --git a/templates/partials/menu.tpl b/templates/partials/menu.tpl
index aa3e97f..940d090 100644
--- a/templates/partials/menu.tpl
+++ b/templates/partials/menu.tpl
@@ -1,7 +1,7 @@
 			<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 unread-count" data-content="{unreadCount.notification}"></span>
-					<i class="fa fa-lg fa-bars"></i>
+					<i class="fa fa-lg fa-fw 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 unread-count" data-content="{unreadCount.chat}"></span>