Add user profile side nav

ember/app/models/user.js

@@ -20,7 +20,7 @@ export default DS.Model.extend(HasItemLists, {
   readTime: DS.attr('date'),
 
   discussionsCount: DS.attr('number'),
-  postsCount: DS.attr('number'),
+  commentsCount: DS.attr('number'),
 
   canEdit: DS.attr('boolean'),
   canDelete: DS.attr('boolean'),

ember/app/router.js

@@ -13,7 +13,8 @@ Router.map(function() {
   });
 
   this.resource('user', {path: '/u/:username'}, function() {
-    this.route('activity');
+    this.route('activity', {path: '/'});
+    this.route('discussions');
     this.route('posts');
     this.route('edit');
   });

ember/app/routes/user.js

@@ -3,5 +3,11 @@ import Ember from 'ember';
 export default Ember.Route.extend({
   model: function(params) {
     return this.store.find('user', params.username);
+  },
+
+  afterModel: function(model) {
+    if (!model.get('joinTime')) {
+      return model.reload();
+    }
   }
 });

ember/app/styles/flarum/dropdowns.less

@@ -21,6 +21,11 @@
     margin: 10px 0;
     background-color: @fl-body-control-bg;
   }
+  & .count {
+    font-weight: bold;
+    font-size: 12px;
+    margin-left: 5px;
+  }
 }
 .dropdown-split.item-count-1 {
   & .btn {
@@ -105,3 +110,25 @@
     .box-shadow(none);
   }
 }
+
+.nav-list() {
+  & > li > a {
+    padding: 8px 0;
+    color: @fl-body-muted-color;
+
+    &:hover {
+      background: none;
+      color: @link-hover-color;
+    }
+
+    & .fa {
+      margin-right: 8px;
+      font-size: 15px;
+    }
+  }
+  & > li.active > a {
+    background: none;
+    color: @fl-body-primary-color;
+    font-weight: bold;
+  }
+}

ember/app/styles/flarum/index.less

@@ -1,7 +1,7 @@
 // ------------------------------------
 // Sidebar
 
-.index-nav > ul {
+.side-nav > ul {
   margin: 0;
   padding: 0;
   list-style: none;
@@ -13,41 +13,22 @@
 // larger than a phone, however, we need to affix the sidebar and expand the
 // .dropdown-select into a plain list.
 @media @tablet, @desktop, @desktop-hd {
-  .index-nav {
+  .side-nav {
-    // Expand the dropdown-select component into a normal nav list
+    // Expand the dropdown-select component into a normal nav list.
-    // @todo Extract this into a mixin as we'll probably need to do it elsewhere.
     & .dropdown-select {
       display: block;
 
       .expand-dropdown();
 
       & .dropdown-menu {
-        & > li > a {
+        .nav-list();
-          padding: 8px 0;
-          color: @fl-body-muted-color;
-
-          &:hover {
-            background: none;
-            color: @link-hover-color;
-          }
-
-          & .fa {
-            margin-right: 8px;
-            font-size: 15px;
-          }
-        }
-        & > li.active > a {
-          background: none;
-          color: @fl-body-primary-color;
-          font-weight: bold;
-        }
       }
     }
   }
 }
 
 @media @tablet {
-  .index-nav {
+  .side-nav {
     padding: 15px 0;
     white-space: nowrap;
     overflow: auto;
@@ -78,7 +59,7 @@
 }
 
 @media @desktop, @desktop-hd {
-  .index-nav {
+  .side-nav {
     float: left;
 
     &, & > ul {
@@ -94,6 +75,8 @@
         margin-bottom: 10px;
       }
     }
+  }
+  .index-nav {
     & .new-discussion {
       display: block;
       margin-bottom: 20px;

ember/app/templates/index.hbs

@@ -6,7 +6,7 @@
 
   <div class="container">
 
-    <nav class="index-nav">
+    <nav class="side-nav index-nav">
       {{ui/item-list items=view.sidebar}}
     </nav>
 

ember/app/templates/user.hbs

@@ -1,7 +1,7 @@
 {{user/user-card user=model class="hero user-hero" editable=true controlsButtonClass="btn btn-default"}}
 
 <div class="container">
-  <nav class="user-nav">
+  <nav class="side-nav user-nav">
     {{ui/item-list items=view.sidebar}}
   </nav>
 

ember/app/views/user.js

@@ -1,7 +1,40 @@
 import Ember from 'ember';
 
 import HasItemLists from 'flarum/mixins/has-item-lists';
+import NavItem from 'flarum/components/ui/nav-item';
+import DropdownSelect from 'flarum/components/ui/dropdown-select';
+
+var precompileTemplate = Ember.Handlebars.compile;
 
 export default Ember.View.extend(HasItemLists, {
-  itemLists: ['sidebar']
+  itemLists: ['sidebar'],
+
+  populateSidebar: function(items) {
+    var nav = this.populateItemList('nav');
+    items.pushObjectWithTag(DropdownSelect.extend({items: nav, listItemClass: 'title-control'}), 'nav');
+  },
+
+  populateNav: function(items) {
+    items.pushObjectWithTag(NavItem.extend({
+      label: 'Activity',
+      icon: 'user',
+      layout: precompileTemplate('{{#link-to "user.activity"}}{{fa-icon icon}} {{label}}{{/link-to}}')
+    }), 'activity');
+
+    items.pushObjectWithTag(NavItem.extend({
+      label: 'Discussions',
+      icon: 'reorder',
+      badge: Ember.computed.alias('user.discussionsCount'),
+      user: this.get('controller.model'),
+      layout: precompileTemplate('{{#link-to "user.discussions"}}{{fa-icon icon}} {{label}} <span class="count">{{badge}}</span>{{/link-to}}')
+    }), 'discussions');
+
+    items.pushObjectWithTag(NavItem.extend({
+      label: 'Posts',
+      icon: 'comment-o',
+      badge: Ember.computed.alias('user.commentsCount'),
+      user: this.get('controller.model'),
+      layout: precompileTemplate('{{#link-to "user.posts"}}{{fa-icon icon}} {{label}} <span class="count">{{badge}}</span>{{/link-to}}')
+    }), 'posts');
+  }
 });