Make navigation usable on mobile + improve navbar overall

_includes/menu.html

@@ -1,14 +1,14 @@
-<div id="menu">
-	{% assign docs = (site.docs | sort: "order" ) %}
-	{% for node in docs %}
-		{% assign level = (node.relative_path | split: '/' | size) %}
-		{% if level == 2 # Not a subfolder %}
+{% assign docs = (site.docs | sort: "order" ) %}
+{% for node in docs %}
+	{% assign level = (node.relative_path | split: '/' | size) %}
+	{% if level == 2 # Not a subfolder %}
+		<li>
 			<a
 				href="{{ site.baseurl }}{{ node.url | remove: "/index" }}"
 				{% if page.url == node.url %}class="active"{% endif %}
 			>
 				{{ node.title }}
 			</a>
-		{% endif %}
-	{% endfor %}
-</div>
+		</li>
+	{% endif %}
+{% endfor %}

_layouts/default.html

@@ -25,9 +25,15 @@
 			</a>
 
 			<ul class="nav-links">
-				<li><a href="/docs">Documentation</a></li>
-				<li><a href="https://www.npmjs.com/search?q=keywords%3Athelounge-theme">Themes</a></li>
-				<li><a href="/community">Community</a></li>
+				<li class="hidden-xs">
+					<a href="/docs" {% if page.url contains "/docs" %}class="active"{% endif %}>Documentation</a>
+				</li>
+				<li class="hidden-xs">
+					<a href="https://www.npmjs.com/search?q=keywords%3Athelounge-theme">Themes</a>
+				</li>
+				<li class="hidden-xs">
+					<a href="/community" {% if page.url == "/community.html" %}class="active"{% endif %}>Community</a>
+				</li>
 				<li><a href="https://github.com/thelounge" title="GitHub Organization for The Lounge">
 					<i class="fab fa-github fa-lg" aria-hidden="true"></i>
 				</a></li>
@@ -36,6 +42,12 @@
 						<i class="fas fa-search fa-lg" aria-hidden="true"></i>
 					</button>
 				</li>
+				<li class="hidden-sm hidden-md hidden-lg">
+					<button id="menu-btn" title="Menu" class="collapsed" data-toggle="collapse" data-target="#mobile-menu" aria-expanded="false">
+						<i class="fa fa-bars fa-lg" aria-hidden="true"></i>
+						<span class="sr-only">Toggle navigation</span>
+					</button>
+				</li>
 			</ul>
 
 			<div class="nav-search-overlay">
@@ -55,6 +67,15 @@ <h1>Search results</h1>
 		<div id="accessible-search-summary" aria-live="assertive" class="sr-only"></div>
 	</div>
 
+	<div id="mobile-menu" class="container collapse">
+		<ul class="menu">
+			<li><a href="/" {% if page.url == "/" %}class="active"{% endif %}>Home</a></li>
+			{% include menu.html %}
+			<li><a href="https://www.npmjs.com/search?q=keywords%3Athelounge-theme">Themes</a></li>
+			<li><a href="/community" {% if page.url == "/community.html" %}class="active"{% endif %}>Community</a></li>
+		</ul>
+	</div>
+
 	<div id="content">
 		{{ content }}
 	</div>

_layouts/documentation.html

@@ -4,8 +4,10 @@
 
 <div id="main" class="container">
 	<div class="row">
-		<aside class="col-sm-3">
-			{% include menu.html %}
+		<aside id="desktop-menu" class="col-sm-3 hidden-xs">
+			<ul class="menu">
+				{% include menu.html %}
+			</ul>
 		</aside>
 		<div class="col-sm-9">
 			{% include page.html %}

css/style.css

@@ -100,7 +100,6 @@ img {
 
 .container {
 	max-width: 750px;
-	padding: 0 20px;
 }
 #nav {
 	background: #415364;
@@ -145,13 +144,16 @@ img {
 }
 #nav .container {
 	position: relative;
+	padding-left: 5px;
+	padding-right: 5px;
 }
 #nav .nav-search-overlay {
 	position: absolute;
-	width: calc(75% - 2 * 20px);
 	top: 0;
 	bottom: 0;
-	right: 20px;
+	left: 0;
+	right: 0;
+	padding: 0 10px;
 	background: #415364;
 	opacity: 0;
 	visibility: hidden;
@@ -307,28 +309,29 @@ img {
 #main {
 	margin-bottom: 60px;
 }
-#menu {
-	margin-top: 35px;
-	line-height: 2;
+#desktop-menu {
+	margin-top: 20px;
+}
+.menu {
+	padding-left: 0;
+	list-style: none;
 }
-#menu a {
+.menu li {
+	margin: 0;
+}
+.menu a {
 	color: inherit;
 	font-weight: normal;
 	display: block;
+	padding: 5px 0;
 }
-#menu a:hover,
-#menu a.active {
+.menu a:hover,
+.menu a.active {
 	color: #50a656;
 }
-#menu a.active {
+.menu a.active {
 	font-weight: bold;
 }
-#menu strong {
-	margin-top: 1em;
-}
-#menu strong:first-child {
-	margin-top: 0;
-}
 #footer {
 	color: #ccc;
 	font-size: 12px;