All right, and with our number and with our hero in place now, let's work on this sucker, the sidebar
now, it's only going to be displayed on a small screen.
So once we get to the bigger screen, notice how hard that by default, using the access button on a
small screen, we should see something like this where, of course, we have to close button.
And then, of course, once we click on a button in number, we open up the sidebar, OK, something
that we have done quite a few times already in the project.
That's why we all speed this up.
When I say, all right, I would want to grab my sidebar component.
Now, here, though, it's going to be interesting because we are going to iterate over siblings and
then there's going to be multiple iterations.
And also, of course, we would need a vast global context.
So let's look for a global context first.
So where is the sidebar?
Copy and paste and learn, as far as the values, I would want to get close sidebar sense in the sidebar,
there is going to be button that closes it.
And also, I need that state value.
I need is a sidebar sidebar open that is important.
And then of course, the closed sidebar function as well.
I'm getting them from use global context.
Now, of course, let's work on our return.
And in this case I can right away set up everything using the template string.
So I'm going to go with class name and then I'm going back to the JavaScript.
I will set up my templates and there it is.
And then we'll set up the interpolation where if is sidebar is true, then of course we would want to
add two classes and if not, then there's just going to be one.
So I'm going to say here, if it is true, then we go sidebar wrapper and then class of show.
If it is not true, then we just go with sidebar and then rapper Weichsel and then once we save, since
it is true, remember in the global context, we set it up as true.
Not right now how our screenwriter, where it got darker because we have the overlay and then inside
of it I'm going to go with a dev with a class of sidebar.
So sidebar, Dev, and let's just say it.
And there now, of course, we have our sidebar.
And first, I would want to place a button.
So I'm going to go here with a button.
And as far as the class is going to have a class of closed, closed hyphen between.
And then once we click on a button, I would want to close the sidebar.
So when I say unclick, we already have our function closed sidebar.
Correct.
And we have the icon as well.
So inside of the button, I'm going to go with F.A.A. and nine times.
So that allows me to close the sidebar.
Now, once I click on this, of course, we close the sidebar and then sends in a number.
We have toggle button that does the opposite, that opens the course.
We can clearly toggle it now by default in a state.
It is true because as we're working on a sidebar, of course, I would want to display all the time.
All right.
Now comes the interesting part where right next to the button, I would want to display the links.
But this is going to be the interesting thing where we'll have to do double iteration.
Why?
Because our data is nested.
If we check out the data, we have one.
All right, siblings, where we have the object and line inside of the object, of course, it displays
the page, but then each page has the subjects, which is another way.
So that is going to be something interesting that we haven't done before.
So I'm going to go there with a class of sidebar links and then in here I'm already importing sublingual
from there.
So let's iterate over.
So some blanks then map.
And then I just went with item and index, so index is because we have a list, an item represents of
this object.
So now I'm talking about the whole big object.
And instead of the object out one of the structure, two things, the links and page.
So Links is, of course, al-Nouri and Page just says, well, where these sub links belong to.
So if the page name is developers, that means that those siblings belong there.
And now as far as the return, I'm going to go here with an article and then it will are a key and I
will be equal to an index and I won't add anything as far as access, but we do want heading for and
then let's just display the page or just see whether everything works under it.
So these are my pages.
Now, the gotcher here is that inside of this article, I would also want to have a date with a class
of sidebar and then sub lunch.
And inside of this div, I would want to write one more time over that length.
All right.
So we go let's map.
And then again, we need to come up with our callback function and then inside I'm going to say a link
that will represent each item in that array.
So that's another object.
Correct.
And then the second thing, again, we need to have the index.
So we go with index.
I will the structured.
I'm looking for your URL icon and then label coming from the link, of course.
And as far as the return, well, let's go with links since we haven't covered react router link yet.
And I'll set up the key, of course, since it is a let's say index.
And then as far as the atrip, I'll be pointing to the URL, the one that is coming from my object,
of course, and that inside of this link, we're going to have two things.
We're going to have Icon and the label.
So let's at least two things.
And what we should see for every page, we have these siblings.
So Product Page has the siblings, developers, page other siblings, and of course, also goes the
same for the company.
And of course, once I click, I can close and once I open up, I can show the sidebar.
So the only thing that is missing is in my global context, I want to hide it by default.
Correct.
That would make sense.
So where I have to use state for the sidebar, I set it equal to false and also navigate to the bigger
screen, let's say.
Yep, there it is.
That should be our look.
Like I said, we won't be able to see the sidebar on a bigger screen, only on a smaller one.
So we're open up and then once we reach certain screen size, which is highlighted by the default.
OK, good.
We've got the easiest part of the way.
Now, of course, we'll tackle the big beast, the submenu essentially as we're hovering over those
buttons, then we would want to display that submenu component.