UX: Use mobile nav for group page.

app/assets/javascripts/discourse/templates/group.hbs

@@ -30,18 +30,16 @@
     {{/if}}
   </div>
 
-  <div class='pull-left group-nav'>
-    <ul class='nav-stacked'>
-      {{#each getTabs as |tab|}}
-        <li class="{{if tab.active 'active'}}">
-          {{#link-to tab.location model title=tab.message}}
-            {{tab.message}}
-            {{#if tab.count}}<span class='count'>({{tab.count}})</span>{{/if}}
-          {{/link-to}}
-        </li>
-      {{/each}}
-    </ul>
-  </div>
+  {{#mobile-nav class='group-nav' desktopClass="pull-left nav nav-stacked" currentPath=currentPath}}
+    {{#each getTabs as |tab|}}
+      <li class="{{if tab.active 'active'}}">
+        {{#link-to tab.location model title=tab.message}}
+          {{tab.message}}
+          {{#if tab.count}}<span class='count'>({{tab.count}})</span>{{/if}}
+        {{/link-to}}
+      </li>
+    {{/each}}
+  {{/mobile-nav}}
 
   <div class='pull-left group-outlet'>
     <div class='user-main'>

app/assets/stylesheets/mobile/group.scss

@@ -6,6 +6,24 @@
   width: 100%;
 }
 
+.group-details-container {
+  margin-bottom: 15px;
+}
+
+.group-nav.mobile-nav {
+  margin-bottom: 15px;
+
+  > li {
+    a {
+      color: white;
+
+      .fa { color: white; }
+    }
+  }
+
+  background-color: $quaternary;
+}
+
 table.group-members {
   th {
     text-align: center;