Series: Material Design with ember-paper

Material Design with Ember Paper-Creating a Navbar

Published on May 18, 2016

Creating a really nice-looking navbar just got easier!

In this practical tutorial we explore the ember-toolbar and ember-icon components and how they can combine to make an awesome navbar for your site.


Links

Code

$ ember install ember-paper
$ ember install ember-transition-helper
{{#paper-toolbar}}
  <div class="md-toolbar-tools">
    {{#paper-button action=(transition-to 'home')}}{{paper-icon 'home'}}Home{{/paper-button}}
    {{#paper-button action=(transition-to 'sales')}}Get Started{{/paper-button}}
    {{#paper-button action=(transition-to 'dashboard')}}My Courses{{/paper-button}}

    <div class="paper-right">
      {{paper-icon 'person'}}
      {{#if session.currentUser}}
        {{#paper-button action='logout'}}Logout{{/paper-button}}
      {{else}}
        {{#paper-button action=(transition-to 'login')}}Login{{/paper-button}}
        {{#paper-button action=(transition-to 'register')}}Register{{/paper-button}}
      {{/if}}
    </div>
  </div>
{{/paper-toolbar}}
.paper-right {
  margin-left: auto;
}

Transcript

Hey everyone and welcome back. This is the second episode in our series on Ember Paper. This episode will take a more practical, concrete approach than the last. So we’re going to do a project, we’re going to create a feature, and we’re going to create this navbar. To do that we’re going to use the toolbar component in Ember Paper, as well as a couple of other tricks.

So let’s clear away this toolbar and start from scratch, so this is what it looks like with no toolbar, and we’ll start just by adding the paper-toolbar component. You’ll see that that will get us a blue bar across the top. Next, we’ll start adding buttons, links for them to click, and we’ll start off just with two buttons and see what that gives us.

So this gets us two links, but these links are big, they’re stacked on top of each other, and we don’t want that. We want them side by side over here on the left. For this, we’ll add the md-toolbar-tools class in a div surrounding the buttons, and we’ll see that that arranges them like we want. If you want to separate out what does what in this, you’ll see that the div... it’s the one that makes them line up left to right, but the md-toolbar-tools is the one that gives them the nice styling. It gets them centered and everything.

So next we’ll want to add some links. So there’s two ways to do this. We could use the link-to helper, and as you’ll see that works just fine. There’s also another way to go about this. So if you want to install the ember-transition-helper addon, then what you can do is instead of a link-to helper, you can just add an action, and this action will use the transition-to helper that we pulled in through the addon, and that’ll work just like a link-to. And as we’ll see, this works just as well.

One thing that doesn’t work is forgoing this and putting the link-to helper inside the button. So the reason this doesn’t work is... I mean it technically works, but see all this space? You can click here and not do anything. You have to actually click on the link. So your two choices are put the link-to helper outside the button or use the transition-to helper.

Now excuse me one second while I add a lot more buttons and links for us to work with. You’ll see that over towards the end, I’ll be adding some links that have to do with authentication, and that’ll be interesting for our styling in a second.

So here we have a pretty nice-looking navbar, but there is one thing that’s odd. This 'Logout', you would expect to see it typically over to the upper right instead of smashed in with the other links. Let’s figure out how to do that. So first we’ll wrap the stuff that we want to go to the right in a div, and then we’ll give that div a class. We’ll call it paper-right. Then when defining paper-right, I’ll use my knowledge of flexbox, and I know that if we call the margin-left: auto, that’ll push it off to the right. That’s just one of the ways flexbox works. And there we go, fantastic.

So let’s go ahead and add some finishing touches. We’ll give it some icons, and using Ember Paper icons is really easy. You just do paper-icon, and then one of these many, many icons they have available. So first we’ll create one. We’ll go ahead and there happens to be a home icon available, so we’ll use that. And then here for the user stuff, we’ll go ahead and the paper-icon we’ll use is person. And here we have some nice, cool icons in our layout.

So this is a pretty sweet navbar. There is one weakness of it though, and that is that it’s not responsive. So notice how ‘Logout’ gets cut off and these get smashed up against each other instead of stacking like you would responsively. If you have a nice, easy way to do this within Ember Paper, please let me know in the comments.

Alright, thank you, and next time we talk about Ember Paper, we’ll be talking about forms. And there’s some really cool stuff that they do with forms, so I look forward to seeing you then.

Material Design with ember-paper

Subscribe to our mailing list