Beautiful job, and now it set up our car buttons component, so I'm going to navigate back, of course,
to unlock.
So let's say let's say we have car buttons, ajaz and here, of course, I have my component again.
I have quite a few imports.
So here I'm looking for three icons.
I have a shopping cart.
I have user Myners and User Plus, because remember, when we log in, of course, we'll change these
values.
So let me quickly do it.
So you don't think that I'm just making this up so I'm going to go inside with Google.
I think that's going to be the quickest one.
And there is the moment I logged in.
I have logged out as far as the value, different icon.
And like I previously mentioned, also the check out right now is displayed.
So that should it for the icons, then I have the link because this cart one is actually ailing.
So this one will be eventually set up as a button that will communicate to zero.
Now, this is just going to be a link, but navigate to the court page.
But of course, I'll also want to display how many items I have in here.
Now I have the card icon and then I have this little value which at the moment will heart code.
But that's why I have imported from the card context over here.
OK, so that's why I import this card context, because I'll use a that value and I think we can start
working on it.
One more thing that I would want to mention about the style components notice.
Of course, we have the wrapper, but this is going to be the case where I'll also add a class on this
differentially on this wrapper, and I'll show you in a second one.
So I'm going to go to Class nine and class time is very important.
So we're going to go to Cart BTN and wrapper.
And if you take a look at the cows over here, there's no place where I'm utilizing.
So you might be wondering, well, why we're adding that.
And there's two use cases.
First of all, there's a huge case for the global classes.
There's going to be some global classes that you would want to add.
And the second use case notice here in Navar.
So it's not like I said, once we get to the big screen, I would want to showcase the links as well
as the current ones.
But the moment we serve, notice how we don't see these carbons.
Why?
Well, if we come here to the CFS, keep on scrolling, keep on scrolling and then check it out.
Card, button, wrapper, display grid.
So once we get to that nine hundred ninety two, only then I would want to display them and before that
I hide them by default.
So they're hidden the same as links.
And not to do that, I had to add that class over here.
So technically this class I'm not using in this year, but in the previous one I am going to use cases.
Either you have some kind of parent that you would want to use to select the component you're creating
or there's going to be some kind of global class.
So as far as the return inside of the wrapper, well, I'm going to go with the link first for my card,
remember, because the link was to the card page.
So I'm going to go with CART and I do need to add a class name and I'm looking for a hyphen by the end.
And eventually, once I click it, I will close the sidebar.
So why we're setting this up?
Well, because we take a look at the final project.
And if I make the smaller, what I would want is the moment I click on any of these links, I would
want to close the sidebar.
Correct.
That would make sense.
Otherwise, if I click this and if I don't close it, well, technically, I'm going to navigate that
separate page.
But I mean, it's not going to make any sense since sidebar is going to take up my whole view anyway.
OK, hopefully that is clear.
That's why once we click, we will close the sidebar.
Now, of course, the moment we don't have that functionality, so we'll just leave it the way it is.
But eventually I'm telling you, that will close the sidebar as well.
So I'm going to go with my cart and then this is going to be somewhat more complicated because I do
want to display my little car text as well as the icon and then the thoros not set it up.
As far as the assess, I went with Spaan then for the spine, we added a cart container class and inside
of it we went with a Arcon first.
So F and then shopping cart like so.
And inside of the spine we went with another spine and this one was class name of Cart Halfan Non-value.
And again, eventually this will be dynamic.
This will be coming from cart context by.
Phrenologists, Cutco, Disvalue as well, let's save it and as far as the button, eventually there's
going to be and by the way, let me check it out on a big screen.
This is something we should see and back to the button for the log.
And eventually there's going to be a tannery operator where I'm going to check if we have logged in.
I'm going to display one button with one text and then another, that icon of minus or plus.
But for now, again, we don't have the user, so we might as well just go with the button and I'll
place it right after the link.
And we're going to go type.
And by the way, for some reason this didn't work.
So button of then type it is going to be button, of course, button here and let's add a class name
of all and then hyphen Beatty.
And again, there's going to be on click functionality later.
But instead of this button, let's just say logging on some kind of icon in this case, I think I'm
going to go with +.
So let's type logging on an FAA user and I'm not minus Orsay plus.
That was also something that I was struggling.
I couldn't come up with whether I should place a minus or plus.
I was going back and forth, back and forth.
Then I just went with this.
If you don't like it, if you want to switch it around, that is totally up to you.
So we have the card buttons, at least the initial setup.
So I think we can go with footer because it's going to be somewhat easier.
And then we'll swing back to the sidebar.
And then once we set up the sidebar, then eventually we'll have to set up the functionality where once
we click on the button, then, of course we can see the sidebar.
And once we close it, of course, the sidebar will be hidden.