Amazing work, and the last component of that is going to be displayed on all pages is going to be the
sidebar, so I think we might as well just complete our work as far as the global components and work
on our sidebar.
Now, one thing about the footer, if you would want to have space in between the year and the name
of the company and just the space over here and you should see the name eventually there or I'm sorry,
space, I guess I'm going to close the footer and the moment I'll close the car buttons and I might
as well, even though we'll have to go back here and I'm going to go to the side bar where it is buried.
So now I have my sidebar.
As you can see, again, we have a bunch of imports.
We have the logo since will display it.
And by the way, we're going to make of the screen test more just so you can see what we've got in the
sidebar.
So there is we have the logo.
We have different icon.
So this is going to be the clothes icon.
And again, we're using the same library icons.
Then we have all our links.
And in this case, we do display the checkout.
But again, we'll use the same links initially.
So these are going to be coming from the constants.
The first three and this one will be displayed conditionally.
If we have logged in, we'll display.
If we haven't, then it's going to be hidden.
And of course, like I said, the card buttons as well, one for the card page and the second one for
the login and log functionality.
So logo coming from the same assets and I'm not going to cover that again.
I talk about no link because of course, we are setting up links.
Use broader context, because eventually I'll set up the toggle functional globally, even though at
the moment we'll just do it manually over here inside of the sidebar five times, that's the close icon
links, course links coming from the constant then styled components.
So this is my style component.
So all my styling car buttons, like I said, I also would want them in sidebar and then use user contacts
eventually will get me the value whether the user has logged in or hasn't locked them.
So if the user has logged in and of course I would want to display the check up, if not, then I'm
going to hide it.
And as far as the return will simply start with sidebar container.
Just go with the name, whatever is the name or here.
And then inside of it, I'm going to have my inside.
Now, remember, whenever we talked about the toggling, what did we do?
We added one class and then depending on the value, we added the other class or we didn't.
And the reason why is that happening, because by default, I will hide the sidebar.
Notice here I have scene of negative one and also I translate by one hundred percent and then only if
there is a class of show sidebar, then I display.
So this is going to be the class that is going to be responsible for the toggling.
So let me scroll up.
Inside of this sidebar container, we're going to go with a side element and in order to speed this
up all right away, set up of the operator deterring operator, and I'll just use the local volume,
like I said, eventually, meaning in the next video, we'll set up the functionality globally in one
of the context.
But for now, I'm just going to go is open and by default also true because I would want to show it.
And then in that aside, I'll check.
I'll say, yeah, class name.
And of course it's going to be sidebar class and the other class, the sidebar.
But the show sidebar is going to be displayed conditionally.
That's why I will set up our expression.
We need to go with them for literals.
And in here I'll say is open if it is true, which should be true.
Correct.
Because we have it as the default value, then I'm going to go with two classes over here.
Then I'll say my question mark and then I would want to get the sidebar class and show sidebar class.
However, if it is false, which at the moment of course we can control only manually, then I'm just
going to display show sidebar class.
And in this aside, there's going to be a header.
So Sidebar and Manhatta and inside of it we're going to go with image.
Now, this is not going to be a link, so I'm just going to go with IMG as as the source.
The name again is logo.
The class name, since there's a little bit of styling, so class name is Logo here and text and I'm
going to say comfy and then sloth and there's going to be a button that closes the sidebar.
But the moment, of course, there's no functionality yet.
So we're just going to go with button one class name and we're going to say close hyphen Beatty.
And and you know what's add also type type will be button and that button will just go with our icon,
F.A.A. and then times, let's say that we should see the sidebar.
And of course we do.
There it is.
Of course, now it is displayed.
Why?
Because this one is true.
Again, something we have already done quite a few times.
So hopefully we are on the same page if I changes this.
Of course, I cannot see it now.
There are some issues over here, so I can technically still see it.
But don't worry, once we're done with our component, it's not going to be the case.
So I'm going to go back to troll over here and once we've got everything in place.
Now, I want to go with my links and the way we do that again, we have our there.
And right next to this day, I'm going to go with on our list.
And again, we have a class of links.
And in here I'm going to go with links, some iterating over those links.
So I'm using the map, of course, and then I'm going to go with the structure.
And remember, each link was an object and I can either have it as a name here or I can also the structure
right here.
So I'm going to go, Heidi, text and Yahel, same three properties.
And as far as the return, we're going to go with Elai.
So this item online Akie so this is going to be that idea, of course.
And inside of this last item, let's go with a link and then two and then of course we're having the
same URL and eventually there's going to be unclick since I would want to close the sidebar once I click
on links, something that I showed you a little bit earlier, but for now, just place a text.
So that should be our links.
OK, awesome.
Then I also want to display the check on one by default.
Eventually, of course, we will check whether the user is there.
But for the time being, let me just grab this one.
And I don't need to have a key here.
And as far as the values, I'll set them up manually where this is going to point to a checkout and
of course, text will also be checked.
So we're going to go here with a check on it and then text, let's say that we should see the checkout.
And last thing that I would want to place here is the card buttons.
Remember the component we set up in the last video?
We save it here and we should see the card buttons.
That should do it for the sidebar component and just check the why we have those issues.
So I'll change this manual value to false.
And it should be hidden, but it's not.
And I actually can see my notice here.
I'm saying if is open is true, then I would want to have classes of sidebar and then show sidebar.
However, if it is false, then I would just want to show sidebar.
So that is not correct.
If the is open are false, then I would just want to add the sidebar class and if it is open only then
I'll show sidebar.
So once we save, we're not going to see the sidebar.
So we only see the sidebar if the is open is true, which of course eventually meaning in the next video
we will set it up in one of our contacts.
And then of course there's also going to be a toggle functionality.
So let's set this up still as false.
So it's harder.
And I guess let's start setting up the context where we will toggle the sidebar.