Template reference error in meteor even if Template is already defined

I am getting this error even if I already defined template in my html, I am missing something. Error in my console

index.html

<template name="navbar">
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
       <a class="navbar-brand" href="#">TextCircle</a>
       <ul class="nav navbar-nav">
         <li>
            <a href="#" class="js-add-doc">
             <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
              new Document
            </a>
         </li>

       </ul>
       <p class="navbar-text navbar-right">{{> loginButtons}}</p>
     </div>
   </nav>
</template>

main.js

Template.navbar.events({
     "click .js-add-doc":function(event){
        event.preventDefault();
         console.log("add new doc");
      }
});

What am I missing?

Your main.js file is being loaded on the server side (or both server & client side) however Template is only available on the client side. For more information, please read this.
Also, since Meteor 1.3 it is recommended to structure your app following this example.