- [Instructor] In this video, we will finally
implement our toolbar that we've been hanging onto.
And we will eventually create routes
that will allow us to navigate
between our different views using the toolbar.
Let's continue inside our front end project.
We'll open up our app component,
and between line three and five is our toolbar,
so we'll have to implement a few buttons in here.
So let's start with a button that will take us
to our messages view, which is our current default view.
I'll set the button text to messages,
and I'll end the button, and I'll end the button element.
Now we can see we have a button in our toolbar,
but it pops out a bit too much,
so let's go back and set it to flat.
And that's looking better.
Now let's say we wanted to add in a login button
or something like that, which typically
is all the way on the right side.
Let's take a look at how we can do that.
So if we add a new button,
and I'll just copy line four and paste it below.
I'll just call it login.
If we do that, by default, you can see
they're right beside each other.
If we go back, and in between them we add a v spacer,
now we can see that the login button
has been fully pushed to the right.
Next let's take a look at working with the view router
to actually implement these buttons,
which will allow us to change the routes in the URL,
which will change the component we're currently viewing.
Let's look at that next.