Beautiful.
And once we have the links in place now, it's finally set up our first sidebar, which is going to
be the small sidebar.
So at the moment, we have this ridiculous thing here on a small screen.
And as you can see again, once we change the screens.
Notice how this access is pretty much changing the layout.
But we're looking for is this once we get to the small screen, we still have the button that bar and
then once we click, we can display it and then we can close it in two places and close it if we click
on one of the links.
So let's say I'm going to go to all jobs.
And we also right away, closer.
And also, we have this close button and we'll do it step by step.
So start just by setting up the structure, then will implement the open and close functionality, and
then we'll worry about our links.
So let's navigate back to our read me.
And you're looking for small sidebar?
Wah.
I'm in the small sidebar.
Yes.
These are all the imports we need to have.
Now we already have the wrapper, so this is really up to you.
But in my case, I will take essentially all of this and then just replace whatever I have in the small
sidebar.
So wrapper is forced styles and this is what we're turning vine of this icon.
The Free Times is going to be in the close button.
So this is what you see over here.
Then we want to get the context because remember in the context, we already have that show sidebar
property correct.
That's the one that controls it.
And essentially, that's the one we'll use here.
Now we also want to get the links, the ones that we just set up and enabling.
Now, not Link is coming from REAC Rotterdam, and we'll discuss it in two videos once we actually set
everything up.
Just remember that this is not a mistake.
I know so far we have been using only link component, and yes, it's still a valid choice.
However, travelling has this nice feature that I want to showcase, and therefore we're going to go
with this component instead.
And then I also want to grab the logo from the logo and as far as the return, we go with the wrapper.
So that's our main parent.
And then there's going to be a container and here will toggle this class, the show sidebar.
So once it's present, then we'll display the sidebar.
If it's not present, then it's not going to be shown an insider.
We're going to have a content and or here notice this is going to be a button.
Then there's going to be a header right off the not with a logo, and then eventually there's going
to be in our links.
So we'll iterate over our list, our links list inside of this there and then we'll display them one
by one again.
If you want to take a look at the.
Essentially, what was my approach?
Please reference the wrapper in wrappers and the small sidebar.
So.
Let's get cracking, and I'm going to grab all of these first, and I want to navigate to my small side,
but like I said, I'm just going to override this.
I mean, it's not really a big deal.
And then as far as our turn.
Well, let's go with our rapper and then let's set up our parent.
So therefore, the two classes sidebar, container and show sidebar.
So let's go here with their then sidebar and container and another class show and sidebar.
Once I have these two classes in place, then I want to go with my content one.
So that's my content, and then we'll start with our button.
So let's go here with button.
Then let's add right away type.
I'm going to go with button and then we're going to go with class name a little bit of style and close
hyphen between.
And then we'll also set up on Click Online as far as the functionality.
Well, for now, let's just pass in the function.
Let's say that is going to be a log and we'll say toggle sidebar.
So let's go here with title and sidebar.
Let's say it, but we also want to place that mark on the FAA times coming from reactor icons and more
specifically, the font awesome library.
So let's place our icon right here.
And once we have this one in place, let's take a look.
What do we have as a result?
So I'm going to navigate here the small screen, and it looks like I'll have to refresh and notice over
here.
So if this is going to be my sidebar, so I have the container and also inside of it, I already have
this icon, the little clothes icon, one right next to it.
Let's enter with our logo.
So right after the button, we're going to go with the header element and then we want to go with our
logo.
And this is the case again, where notice since we are reusing the logo, it kind of makes sense that
we already have the component.
And then lastly, let's set up our now, which so right after we had her, let's go with no links and
for the time being.
Well, simply heart coach.
Some dummy technology sounds like a proper choice.
And once I navigate back, this should be our look.
And now let's take a look.
What happens if we remove that show sidebar class?
So with me, inspect and what I'm looking for here is the element known as this one, the device.
And essentially, I'm just going to remove the class just to showcase how it's going to look like again.
Eventually, we will tackle this.
So this is going to depend on our state of our acknowledge.
Once we remove well, we of see the sidebar correct.
And that's going to be the functionality where if this glass is present, beautiful were displayed a
sidebar, if it's not present, then sidebar is hidden.
And once we have the journal structure in place now, we can slowly start adding the functionality.