Adding Navigation Bar

October 24, 2015

Now let’s make the site look a bit better by adding a navigation bar and footer

Procedure

Bring up the terminal and install and remove some packages

meteor add ian:accounts-ui-bootstrap-3
meteor remove accounts-ui

In client/_partial/navbar.html

<template name="navbar">
  <nav class="navbar navbar-inverse">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/">Project name</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="/">Home</a></li>
          <li><a href="{{pathFor 'about'}}">About</a></li>
          <li><a href="/blog">Blog</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          {{#if currentUser}}
            <li><a href="/admin/blog">Blog Admin</a></li>
          {{/if}}
          {{> loginButtons}} <!-- here -->
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </nav>
</template>

In client/_partial/footer.html

<template name="footer">
    <footer class="footer">
        <p>© Company 2014</p>
    </footer>
</template>

Change client/_partial/layout.html to

<template name="layout">
    {{> navbar}}
    {{> yield}}
    {{> footer}}
</template>

Analysis

So first thing we did here is that we swap out the accounts-ui package for the bootstrap themed accounts-ui package. This is mainly so that we can place the login button on the navigation bar

Next we created the navbar.html, which I copied from the example from Bootstrap. The only new thing here is the {{#if currentUser}} line. This is ask meteor if there’s any user logged in, if so, diplay the blog admin link.

Then it’s just a matter of placing the navbar and footer in the right location in layout.html.