UX: initial take at collapsing mobile nav on user page

app/assets/javascripts/discourse/components/mobile-nav.js.es6

@@ -0,0 +1,38 @@
+export default Ember.Component.extend({
+
+  _init: function(){
+    if (!this.get('site.mobileView')) {
+      var classes = this.get('desktopClass');
+      if (classes) {
+        classes = classes.split(' ');
+        this.set('classNames', classes);
+      }
+    }
+  }.on('init'),
+
+  tagName: 'ul',
+
+  classNames: ['mobile-nav'],
+
+  currentPathChanged: function(){
+    this.set('expanded', false);
+    Em.run.next(() => this._updateSelectedHtml());
+  }.observes('currentPath'),
+
+  _updateSelectedHtml(){
+    const active = this.$('.active');
+    if (active && active.html) {
+      this.set('selectedHtml', active.html());
+    }
+  },
+
+  didInsertElement(){
+    this._updateSelectedHtml();
+  },
+
+  actions: {
+    toggleExpanded(){
+      this.toggleProperty('expanded');
+    }
+  }
+});

app/assets/javascripts/discourse/controllers/user-activity.js.es6

@@ -3,7 +3,7 @@ import { exportUserArchive } from 'discourse/lib/export-csv';
 export default Ember.Controller.extend({
   userActionType: null,
   needs: ["application", "user"],
-
+  currentPath: Em.computed.alias('controllers.application.currentPath'),
   viewingSelf: Em.computed.alias("controllers.user.viewingSelf"),
   showBookmarks: Em.computed.alias("controllers.user.showBookmarks"),
 

app/assets/javascripts/discourse/controllers/user-notifications.js.es6

@@ -7,6 +7,8 @@ export default Ember.ArrayController.extend({
 
   showDismissButton: Ember.computed.gt('user.total_unread_notifications', 0),
 
+  currentPath: Em.computed.alias('controllers.application.currentPath'),
+
   actions: {
     resetNew: function() {
       Discourse.ajax('/notifications/mark-read', { method: 'PUT' }).then(() => {

app/assets/javascripts/discourse/controllers/user-private-messages.js.es6

@@ -3,11 +3,11 @@ import Topic from 'discourse/models/topic';
 
 export default Ember.Controller.extend({
 
-  needs: ["user-topics-list", "user"],
+  needs: ["application", "user-topics-list", "user"],
   pmView: false,
-  viewingSelf: Em.computed.alias("controllers.user.viewingSelf"),
+  viewingSelf: Em.computed.alias('controllers.user.viewingSelf'),
   isGroup: Em.computed.equal('pmView', 'groups'),
-
+  currentPath: Em.computed.alias('controllers.application.currentPath'),
   selected: Em.computed.alias('controllers.user-topics-list.selected'),
   bulkSelectEnabled: Em.computed.alias('controllers.user-topics-list.bulkSelectEnabled'),
 

app/assets/javascripts/discourse/controllers/user.js.es6

@@ -6,7 +6,8 @@ import User from 'discourse/models/user';
 export default Ember.Controller.extend(CanCheckEmails, {
   indexStream: false,
   userActionType: null,
-  needs: ['user-notifications', 'user-topics-list'],
+  needs: ['application','user-notifications', 'user-topics-list'],
+  currentPath: Em.computed.alias('controllers.application.currentPath'),
 
   @computed("content.username")
   viewingSelf(username) {

app/assets/javascripts/discourse/templates/components/mobile-nav.hbs

@@ -0,0 +1 @@
+{{yield}}

app/assets/javascripts/discourse/templates/mobile/components/mobile-nav.hbs

@@ -0,0 +1,4 @@
+<li><a {{action 'toggleExpanded'}}>{{{selectedHtml}}} <i class='fa fa-caret-down'></i></a></li>
+<ul class='drop {{if expanded 'expanded'}}'>
+{{yield}}
+</ul>

app/assets/javascripts/discourse/templates/user/activity.hbs

@@ -1,26 +1,21 @@
 <section class='user-navigation'>
-  <ul class='action-list activity-list nav-stacked'>
+  {{#mobile-nav class='activity-nav' desktopClass='action-list activity-list nav-stacked' currentPath=currentPath}}
-
     <li class='no-glyph'>
       {{#link-to 'userActivity.index'}}{{i18n 'user.filters.all'}}{{/link-to}}
     </li>
-
     <li class='no-glyph'>
       {{#link-to 'userActivity.topics'}}{{i18n 'user_action_groups.4'}}{{/link-to}}
     </li>
-
     <li>
       {{#link-to 'userActivity.replies'}}
         <i class="glyph fa fa-reply"></i>{{i18n 'user_action_groups.5'}}
       {{/link-to}}
     </li>
-
     <li>
       {{#link-to 'userActivity.likesGiven'}}
         <i class="glyph fa fa-heart"></i>{{i18n 'user_action_groups.1'}}
       {{/link-to}}
     </li>
-
     {{#if showBookmarks}}
     <li>
       {{#link-to 'userActivity.bookmarks'}}
@@ -28,7 +23,7 @@
       {{/link-to}}
     </li>
     {{/if}}
-  </ul>
+  {{/mobile-nav}}
 
   {{#if viewingSelf}}
     <div class='user-archive'>

app/assets/javascripts/discourse/templates/user/messages.hbs

@@ -4,7 +4,8 @@
   {{d-button class="btn-primary new-private-message" action="composePrivateMessage" icon="envelope" label="user.new_private_message"}}
   {{/if}}
   {{/unless}}
-  <ul class='action-list nav-stacked'>
+
+  {{#mobile-nav class='messages-nav' desktopClass='nav-stacked action-list' currentPath=currentPath}}
     <li class="noGlyph">
       {{#link-to 'userPrivateMessages.index' model}}
         {{i18n 'user.messages.inbox'}}
@@ -35,7 +36,7 @@
     </li>
     {{/if}}
     {{/each}}
-  </ul>
+  {{/mobile-nav}}
 
 </section>
 

app/assets/javascripts/discourse/templates/user/notifications.hbs

@@ -1,6 +1,6 @@
 
 <section class='user-navigation'>
-  <ul class='notification-list action-list nav-stacked'>
+  {{#mobile-nav class='notifications-nav' desktopClass='notification-list action-list nav-stacked' currentPath=currentPath}}
     {{#if model}}
     <li class='no-glyph'>
       {{#link-to 'userNotifications.index'}}{{i18n 'user.filters.all'}}{{/link-to}}
@@ -19,7 +19,7 @@
     </li>
     <li>{{#link-to 'userNotifications.mentions'}}<i class="glyph fa fa-at"></i>{{i18n 'user_action_groups.7'}}{{/link-to}}</li>
     <li>{{#link-to 'userNotifications.edits'}}<i class="glyph fa fa-pencil"></i>{{i18n 'user_action_groups.11'}}{{/link-to}}</li>
-  </ul>
+    {{/mobile-nav}}
 </section>
 
 <section class='user-right'>

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

@@ -148,13 +148,12 @@
       {{/unless}}
     </section>
 
-    <ul class="nav nav-pills user-nav">
+    {{#mobile-nav class='main-nav' desktopClass="nav nav-pills user-nav" currentPath=currentPath}}
       <li>{{#link-to 'userActivity'}}{{i18n 'user.activity_stream'}}{{/link-to}}</li>
       {{#if showNotificationsTab}}
         <li>
           {{#link-to 'userNotifications'}}
-            {{fa-icon "comment" class="glyph"}}
+            {{fa-icon "comment" class="glyph"}}{{i18n 'user.notifications'}}
-            {{i18n 'user.notifications'}}
           {{/link-to}}
         </li>
       {{/if}}
@@ -171,7 +170,7 @@
       {{#if model.can_edit}}
         <li>{{#link-to 'preferences'}}{{fa-icon "cog"}}{{i18n 'user.preferences'}}{{/link-to}}</li>
       {{/if}}
-    </ul>
+    {{/mobile-nav}}
 
     <div class='user-table'>
       <div class='wrapper'>

app/assets/stylesheets/mobile/discourse.scss

@@ -93,3 +93,69 @@ h2#site-text-logo
 .badge-wrapper {
   font-weight: normal;
 }
+
+.user-table {
+  position: relative;
+}
+
+.mobile-view .mobile-nav {
+  &.messages-nav, &.notifications-nav, &.activity-nav {
+    position: absolute;
+    right: 0px;
+    top: -55px;
+  }
+}
+
+
+.mobile-view .mobile-nav {
+  a .fa {
+    margin-right: 8px;
+  }
+  a {
+    color: $primary;
+  }
+  margin: 0;
+  padding: 0;
+  background: dark-light-diff($primary, $secondary, 90%, -65%);
+  list-style: none;
+  overflow: visible;
+  position: relative;
+  width: 40%;
+
+  > li > a {
+    padding: 8px 10px;
+    height: 100%;
+    width: 100%;
+    display: block;
+  }
+  .fa-caret-down {
+    position: absolute;
+    right: 0px;
+  }
+
+  .drop {
+    display: none;
+  }
+  .drop.expanded {
+    left: 0;
+    display: block;
+    position: absolute;
+    z-index: 10000000;
+    background-color: $secondary;
+    width: 98%;
+    list-style: none;
+    margin: 0;
+    padding: 5px;
+    border: 1px solid #eaeaea;
+    li {
+      margin: 5px 0;
+      padding: 0;
+      a {
+        width: 100%;
+        height: 100%;
+        display: block;
+        padding: 5px 8px;
+      }
+    }
+  }
+}