simplify dropdown and add admin-only items

client/views/nav/dropdown_component.html

@@ -8,6 +8,7 @@ dropdownItems (Array)
 - route (String/Function) [optional]
 - label (String/Function) [optional]
 - description (String) [optional]
+- adminOnly (Boolean) [optional]
 
 dropdownLabel (String) [optional]
 
@@ -15,23 +16,25 @@ dropdownLabel (String) [optional]
 
 <template name="dropdownComponent">
   <div class="dropdown header-submodule {{dropdownClass}}">
-    <a class="view dropdown-top-level" href="/">{{dropdownLabel}}</a>
+    <div class="dropdown-top-level" href="/">{{dropdownLabel}}</div>
     <div class="dropdown-menu">
-      <ul role="menu" aria-labelledby="dLabel">
-        {{#with dropdownItems}}
+      {{#with dropdownItems}}
+        <ul class="dropdown-contents" role="menu" aria-labelledby="dLabel">
           {{#each this}}
-            <li>
-              <a class="dropdown-sub-level" href="{{itemPath}}">
-                <span class="menu-label">{{itemLabel}}</span>
-                {{#if description}}<span class="menu-description">{{_ description}}</span>{{/if}}
-              </a>
-            </li>
+            {{#if showDropdownItem}}
+              <li class="{{itemClass}}">
+                <a class="dropdown-sub-level" href="{{itemRoute}}">
+                  <span class="menu-label">{{itemLabel}}</span>
+                  {{#if description}}<span class="menu-description">{{_ description}}</span>{{/if}}
+                </a>
+              </li>
+            {{/if}}
           {{/each}}
-          {{#if hasMoreThanThreeItems}}
-            <li><a href="#">{{_ "Show More"}}</a></li>
-          {{/if}}
-        {{/with}}
-      </ul>
+        </ul>
+        {{#if showMore}}
+          <a class="show-more" href="#">{{_ "Show More"}}</a>
+        {{/if}}
+      {{/with}}
     </div>
   </div>
 </template>

client/views/nav/dropdown_component.js

@@ -16,27 +16,36 @@ Template[getTemplate('dropdownComponent')].helpers({
     // if label is defined, use this. Else default to dropdown name
     return !!this.dropdownLabel ? this.dropdownLabel : i18n.t(this.dropdownName);
   },
-  hasMoreThanThreeItems: function () {
-    return this.length > 3;
+  showDropdownItem: function () {
+    // if this is an admin item, only show it if current user is admin
+    return this.adminOnly ? isAdmin(Meteor.user()) : true;
+  },
+  showMore: function () {
+    return getSetting('navLayout', 'top-nav') == 'side-nav' && this.length > 3;
+  },
+  itemClass: function () {
+    var itemClass = "";
+    if (this.adminOnly) {
+      itemClass += " admin-item";
+    }
+    return itemClass;
   },
   itemLabel: function () {
-    // case 1: if label is a String, return it
-    if (typeof this.label == "string") {
-      return i18n.t(this.label);
-    }
-    // case 2: if label is a Function return its result
-    if (typeof this.label == "function") {
-      return this.label()
-    } 
+    // if label is a Function return its result, else return i18n'd version of label
+    return typeof this.label == "function" ? this.label() :  i18n.t(this.label);
   },
-  itemPath: function () {
-    // case 1: if route is a String, apply Router.path() to it
-    if (typeof this.route == "string") {
-      return Router.path(this.route);
-    }
-    // case 2: if route is a Function return its result
-    if (typeof this.route == "function") {
-      return this.route()
-    }
+  itemRoute: function () {
+    // if route is a Function return its result, else apply Router.path() to it
+    return typeof this.route == "function" ? this.route() : Router.path(this.route);
+  }
+});
+
+Template[getTemplate('dropdownComponent')].events({
+  'click .show-more': function (e, t) {
+    e.preventDefault();
+
+    $dropdown = t.$('.dropdown');
+    console.log($dropdown);
+    $dropdown.toggleClass('dropdown-open');
   }
 });

packages/telescope-base/lib/base.js

@@ -39,10 +39,6 @@ primaryNav = [
   {
     template: 'viewsMenu',
     order: 10
-  },
-  {
-    template: 'adminMenu',
-    order: 20
   }
 ];
 
@@ -61,30 +57,6 @@ secondaryNav = [
   }
 ];
 
-// array containing items in the admin menu
-adminMenu = [
-  {
-    route: 'posts_pending',
-    label: 'Pending',
-    description: 'posts_awaiting_moderation'
-  },
-  {
-    route: 'posts_scheduled',
-    label: 'Scheduled',
-    description: 'future_scheduled_posts'
-  },
-  {
-    route: 'all-users',
-    label: 'Users',
-    description: 'users_dashboard'
-  },
-  {
-    route: 'settings',
-    label: 'Settings',
-    description: 'telescope_settings_panel'
-  }
-];
-
 // array containing items in the views menu
 viewsMenu = [
   {
@@ -101,6 +73,32 @@ viewsMenu = [
     route: 'posts_best',
     label: 'best',
     description: 'highest_ranked_posts_ever'
+  },
+  {
+    route: 'posts_pending',
+    label: 'Pending',
+    description: 'posts_awaiting_moderation',
+    adminOnly: true
+  },
+  {
+    route: 'posts_scheduled',
+    label: 'Scheduled',
+    description: 'future_scheduled_posts',
+    adminOnly: true
+  },  
+];
+
+// array containing items in the admin menu
+adminMenu = [
+  {
+    route: 'settings',
+    label: 'Settings',
+    description: 'telescope_settings_panel'
+  },
+  {
+    route: 'all-users',
+    label: 'Users',
+    description: 'users_dashboard'
   }
 ];
 
@@ -119,6 +117,12 @@ userMenu = [
     label: 'edit_account',
     description: 'edit_your_profile'
   },
+  {
+    route: 'settings',
+    label: 'settings',
+    description: 'settings',
+    adminOnly: true
+  },
   {
     route: 'signOut',
     label: 'sign_out',

packages/telescope-theme-base/lib/client/scss/specific/_dropdown.scss

@@ -60,4 +60,16 @@
       }
     }
   }
+}
+.admin-item{
+  .menu-label:after{
+    content: "[A]";
+    font-size: 10px;
+    color: $red;
+    display: inline-block;
+    margin-left: 3px;
+  }
+}
+.dropdown-top-label{
+  cursor: pointer;
 }

packages/telescope-theme-hubble/lib/client/scss/modules/_nav.scss

@@ -100,6 +100,7 @@
  }
 
 $nav-width: 250px;
+
 .side-nav{
   .inner-wrapper{
     margin-left: $nav-width;
@@ -114,6 +115,7 @@ $nav-width: 250px;
 		height: 100%;
 		background: #e1e4e5;
 		overflow-y: auto;
+		padding-bottom: 30px;
 		.dropdown-top-level{
 			display: block;
 			border-bottom: 1px solid #ccc;
@@ -133,9 +135,21 @@ $nav-width: 250px;
 			font-weight: bold;
 		}
 	}
-	.dropdown-menu{
+	.header-submodule{
+		margin-bottom: $grid-margin*3;
+	}
+	.dropdown-top-level{
+		cursor: default;
+	}
+	.dropdown-contents{
 		max-height: 90px;
 		overflow: hidden;
 		margin-bottom: $grid-margin;
 	}
+	.dropdown-open .dropdown-contents{
+		max-height: none;
+	}
+	.notifications-menu{
+		display: none;
+	}
 }