Added active classes to the header.

chapter13-6
DiscoverMeteor · Oct 19, 2015 · 0696e8a · 0696e8a
1 parent 9014a07
commit 0696e8a
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/client/templates/includes/header.html b/client/templates/includes/header.html
@@ -11,14 +11,14 @@
     </div>
     <div class="collapse navbar-collapse" id="navigation">
       <ul class="nav navbar-nav">
-        <li>
+        <li class="{{activeRouteClass 'home' 'newPosts'}}">
           <a href="{{pathFor 'newPosts'}}">New</a>
         </li>
-        <li>
+        <li class="{{activeRouteClass  'bestPosts'}}">
           <a href="{{pathFor 'bestPosts'}}">Best</a>
         </li>
         {{#if currentUser}}
-          <li>
+          <li class="{{activeRouteClass 'postSubmit'}}">
             <a href="{{pathFor 'postSubmit'}}">Submit Post</a>
           </li>
           <li class="dropdown">

diff --git a/client/templates/includes/header.js b/client/templates/includes/header.js
@@ -0,0 +1,12 @@
+Template.header.helpers({
+  activeRouteClass: function(/* route names */) {
+    var args = Array.prototype.slice.call(arguments, 0);
+    args.pop();
+
+    var active = _.any(args, function(name) {
+      return Router.current() && Router.current().route.getName() === name
+    });
+
+    return active && 'active';
+  }
+});