UX: don't show the top period in the navigation bar since it has its own dropdown

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

@@ -1,24 +1,28 @@
 /* You might be looking for navigation-item. */
 
+import computed from "ember-addons/ember-computed-decorators";
+
 export default Ember.Component.extend({
   tagName: 'li',
   classNameBindings: ['active'],
 
-  router: function() {
+  @computed()
+  router() {
     return this.container.lookup('router:main');
-  }.property(),
+  },
 
-  fullPath: function() {
+  @computed("path")
-    return Discourse.getURL(this.get('path'));
+  fullPath(path) {
-  }.property('path'),
+    return Discourse.getURL(path);
+  },
 
-  active: function() {
+  @computed("route", "router.url")
-    const route = this.get('route');
+  active(route) {
     if (!route) { return; }
 
     const routeParam = this.get('routeParam'),
           router = this.get('router');
 
     return routeParam ? router.isActive(route, routeParam) : router.isActive(route);
-  }.property('router.url', 'route')
+  }
 });

app/assets/javascripts/discourse/components/navigation-bar.js.es6

@@ -1,27 +1,25 @@
+import { default as computed, observes } from "ember-addons/ember-computed-decorators";
 import DiscourseURL from 'discourse/lib/url';
 
 export default Ember.Component.extend({
   tagName: 'ul',
   classNameBindings: [':nav', ':nav-pills'],
   id: 'navigation-bar',
-  selectedNavItem: function(){
-    const filterMode = this.get('filterMode'),
-          navItems = this.get('navItems');
-
-    var item = navItems.find(function(i){
-      return i.get('filterMode').indexOf(filterMode) === 0;
-    });
 
+  @computed("filterMode", "navItems")
+  selectedNavItem(filterMode, navItems){
+    var item = navItems.find(i => i.get('filterMode').indexOf(filterMode) === 0);
     return item || navItems[0];
-  }.property('filterMode'),
+  },
 
-  closedNav: function(){
+  @observes("expanded")
+  closedNav() {
     if (!this.get('expanded')) {
       this.ensureDropClosed();
     }
-  }.observes('expanded'),
+  },
 
-  ensureDropClosed: function(){
+  ensureDropClosed() {
     if (!this.get('expanded')) {
       this.set('expanded',false);
     }
@@ -30,25 +28,23 @@ export default Ember.Component.extend({
   },
 
   actions: {
-    toggleDrop: function(){
+    toggleDrop() {
       this.set('expanded', !this.get('expanded'));
-      var self = this;
-      if (this.get('expanded')) {
 
+      if (this.get('expanded')) {
         DiscourseURL.appEvents.on('dom:clean', this, this.ensureDropClosed);
 
-        Em.run.next(function() {
+        Em.run.next(() => {
+          if (!this.get('expanded')) { return; }
 
-          if (!self.get('expanded')) { return; }
+          this.$('.drop a').on('click', () => {
-
+            this.$('.drop').hide();
-          self.$('.drop a').on('click', function(){
+            this.set('expanded', false);
-            self.$('.drop').hide();
-            self.set('expanded', false);
             return true;
           });
 
-          $(window).on('click.navigation-bar', function() {
+          $(window).on('click.navigation-bar', () => {
-            self.set('expanded', false);
+            this.set('expanded', false);
             return true;
           });
         });

app/assets/javascripts/discourse/components/navigation-item.js.es6

@@ -1,3 +1,4 @@
+import computed from "ember-addons/ember-computed-decorators";
 import StringBuffer from 'discourse/mixins/string-buffer';
 
 export default Ember.Component.extend(StringBuffer, {
@@ -7,22 +8,23 @@ export default Ember.Component.extend(StringBuffer, {
   hidden: Em.computed.not('content.visible'),
   rerenderTriggers: ['content.count'],
 
-  title: function() {
+  @computed("content.categoryName", "content.name")
-    var categoryName = this.get('content.categoryName'),
+  title(categoryName, name) {
-        name = this.get('content.name'),
+    const extra = {};
-        extra = {};
 
     if (categoryName) {
       name = "category";
       extra.categoryName = categoryName;
     }
-    return I18n.t("filters." + name.replace("/", ".") + ".help", extra);
-  }.property("content.{categoryName,name}"),
 
-  active: function() {
+    return I18n.t("filters." + name.replace("/", ".") + ".help", extra);
-    return this.get('content.filterMode') === this.get('filterMode') ||
+  },
-           this.get('filterMode').indexOf(this.get('content.filterMode')) === 0;
+
-  }.property('content.filterMode', 'filterMode'),
+  @computed("content.filterMode", "filterMode")
+  active(contentFilterMode, filterMode) {
+    return contentFilterMode === filterMode ||
+           filterMode.indexOf(contentFilterMode) === 0;
+  },
 
   renderString(buffer) {
     const content = this.get('content');

app/assets/javascripts/discourse/controllers/navigation/category.js.es6

@@ -1,3 +1,4 @@
+import computed from "ember-addons/ember-computed-decorators";
 import NavigationDefaultController from 'discourse/controllers/navigation/default';
 import { setting } from 'discourse/lib/computed';
 
@@ -6,8 +7,9 @@ export default NavigationDefaultController.extend({
   showingParentCategory: Em.computed.none('category.parentCategory'),
   showingSubcategoryList: Em.computed.and('subcategoryListSetting', 'showingParentCategory'),
 
-  navItems: function() {
+  @computed("showingSubcategoryList", "category", "noSubcategories")
-    if (this.get('showingSubcategoryList')) { return []; }
+  navItems(showingSubcategoryList, category, noSubcategories) {
-    return Discourse.NavItem.buildList(this.get('category'), { noSubcategories: this.get('noSubcategories') });
+    if (showingSubcategoryList) { return []; }
-  }.property('category', 'noSubcategories')
+    return Discourse.NavItem.buildList(category, { noSubcategories });
+  }
 });

app/assets/javascripts/discourse/controllers/navigation/default.js.es6

@@ -1,12 +1,18 @@
+import computed from "ember-addons/ember-computed-decorators";
+
 export default Ember.Controller.extend({
   needs: ['discovery', 'discovery/topics'],
 
-  categories: function() {
+  @computed()
+  categories() {
     return Discourse.Category.list();
-  }.property(),
+  },
 
-  navItems: function() {
+  @computed("filterMode")
-    return Discourse.NavItem.buildList(null, {filterMode: this.get('filterMode')});
+  navItems(filterMode) {
-  }.property('filterMode')
+    // we don't want to show the period in the navigation bar since it's in a dropdown
+    if (filterMode.indexOf("top/") === 0) { filterMode = filterMode.replace("top/", ""); }
+    return Discourse.NavItem.buildList(null, { filterMode });
+  }
 
 });

app/assets/javascripts/discourse/models/nav-item.js.es6

@@ -103,21 +103,17 @@ NavItem.reopenClass({
 
   buildList(category, args) {
     args = args || {};
+
     if (category) { args.category = category }
 
-    var items = Discourse.SiteSettings.top_menu.split("|");
+    let items = Discourse.SiteSettings.top_menu.split("|");
 
-    if (args.filterMode && !_.some(items, function(i){
+    if (args.filterMode && !_.some(items, i => i.indexOf(args.filterMode) !== -1)) {
-      return i.indexOf(args.filterMode) !== -1;
-    })) {
       items.push(args.filterMode);
     }
 
-    return items.map(function(i) {
+    return items.map(i => Discourse.NavItem.fromText(i, args))
-      return Discourse.NavItem.fromText(i, args);
+                .filter(i => i !== null && !(category && i.get("name").indexOf("categor") === 0));
-    }).filter(function(i) {
-      return i !== null && !(category && i.get("name").indexOf("categor") === 0);
-    });
   }
 
 });