- [Instructor] We're created this variable
called sliderStatus that allows us to turn on
the display of this section right here,
but we have no way of doing it with our interface
so let's go ahead and do that.
I've also added an additional library
that allows me to use a bunch of icons,
it's a library called Font Awesome
and you can find out more about it at this URL.
And what you do is that you
copy this reference to the CSS file,
and I've already done this for you,
but if you go to Settings you can see that I've added this
under the CSS tabs and it's right here,
so we can just go ahead and use the icons from that library.
So to do this we're going to go into the HTML
and we're going to work with the section
that right now is essentially this nav right here,
we're going to modify this
and then we're going to add a button
that allows us to toggle this variable that we created.
So I'm going to get rid of actually the background,
because there is a background that is light
if we add something here,
you'll see that the background appears.
So if we remove this class in Bootstrap,
it's going to get rid of that background
and you can see that it's now transparent
and it's nice because it's on top of everything else
but you're not going to see that color.
So in addition to that, I'm going to take off this right here
so that that navigation's going to show by default,
even though right now it says zero
we're going to hide this with a variable,
with that v-if variable in a minute.
And then inside here, then I'm going to modify the classes
so that this stuff in here is displayed as a flex item.
And that's because we want this element,
and then the additional button
that's going to be appearing right here,
to be next to each other.
So display flex
then we're going to create our button
and this is going to have a class
and again I'm using Bootstrap classes
of btn
and btn-sm
and btn-outline-success
which is going to give us a gray button.
So technically I can just put a dollar sign here
'cause this is kind of what I want
but I'm going to use the icons from that icon library,
so the way that you use them
is you create an i tag with a class
and we'll add the fas
and the fa dollar
sign class here,
this will give us a much prettier button
when we need to close out that tag,
so let's go ahead and close it out.
And let's go ahead and put a carat turn here
so we can see it a little bit better.
So that looks good
and then in addition to that
I'm going to create a container div
so this will be a div right here,
I'm going to give it a class of margin to the left of two
so there's a little bit of breathing room
between my dollar sign icon and the cart
and then in here when the close out that div
plus I'll make sure that I add the v-if statement here
so that the cart actually only shows up
if the length where the amount of items in the cart
is greater than zero.
So now we only get the dollar sign
until we add some elements here
and then this quits over so that's great.
So let's go ahead and add functionality to this button,
we've got the button but it's not really doing anything
as you know you use the v-on directive here
so you can say v-on and then click
and then equal sign
and then whatever variable you want here.
Now there's a shortcut for v-on
just like there is one for v-bind
and the shortcut for v-on is the add sign.
So you can say add click
or add whatever other event you want to do
and that's a fantastic shortcut
that you'll see used all the time.
In addition to that we need to toggle the value
of the variable called sliderStatus
because that's what turns this slider on or off.
So let's go ahead and say @click
and this is the sort of toggle shortcut,
we'll say @click sliderStatus
equals not sliderStatus and that's it
now when I click on this
it'll set the value of sliderStatus
to the opposite of whatever it was,
so if it was true it'll be false,
if it's false it will be true
and so in effect it shows and hides that element.
So that is a couple of really cool shortcuts
that you'll use all the time
and I'm also going to set this to false by default,
so that is not going to show until you click on this
and now we have a nice toggle that we built with Vue.js.