So let's navigate back to our people, we're looking for folder number 12.
So let's start with their server, clear everything city back to the road.
And then once I'm back on the road, of course, I'm looking for a set of folder in the folder number
12 online.
I would want NPM install and learn and start and RPM start work.
So.
So in the project you find, of course, the source.
You've got objets where we have the heading to and there's going to be multiple components.
We're going to have a home component.
That's where we display both buttons for the sidebar and the model and also the components as well for
the model and for the sidebar.
I think I'm going to close the integrated terminal for now.
Then we're going to navigate to our pages and we'll just display all three components.
And then one by one, we'll set up the structure.
So we're going to start with home.
OK, so then I'm looking for the model and sidebar.
The order is irrelevant since we're using position fixed for both of them.
So we have a model and then the sidebar.
So now, of course, let's start working in the home.
And here will place two buttons, so I'm going to go with some kind of return and I'll just say, man,
here and inside of the main will place one button for the sidebar and then the second one for the model.
So let's just go with Button.
I'll close the sidebar here and eventually there's going to be on Click.
Now, we just want to add the class name and that one will be sidebar and then toggle like so and that
inside of the button.
I'm going to go with F.A.A. Barsh icon that we're getting from the reactor.
Let's save it.
Yep, there it is.
Now, of course, we have our button and then right after the button, I'm going to go with another
one for the model.
So class name can be done.
And in this case, I'm not going to place an icon.
I'm just going to have a text of show model.
So now we have both of these things.
Next, I would want to work on a model or sidebar, whichever one you prefer, but I'm going to go with
model.
And then in here, eventually, of course, there's going to be more logic, but we'll start simply
by returning it there and we'll add some class names.
So eventually it is going to be dynamic.
That's why.
All right, away, set up my curly braces and all right away, I use my template string again.
For now.
We'll just add those classes, but then eventually there's going to be a ternary operator.
So I'm going to go with modal overlay class, lower class.
And that one for sure, always needs to be on.
If we want to toggle, show or hide the model, we'll do that using the show model class and then inside
of the model, I'm going to go with Dave with a class of model container model hyphen container.
And then in here we're going to have a heading three with model content like so.
And if I say if you have the model, then you'll be able to say, if not, then of course the model
will be hidden.
Just keep that in mind, since I would want to see right now what I'm actually adding to the model.
I'm going to go with show model class and then let's just add a button that eventually will close the
model.
So we go with button.
We need to add a class name on the class that we're looking for is close, close hyphen model and then
hyphen between online and sort of the button.
We have five times icon from reactance, so we just go with F.A.A. and times and then of course we need
to close out.
Our component is now we have the button.
Of course no functionality is working right now.
Don't worry about it.
Eventually, of course, we will hook it up.
And of course, now, since I would want to see my sidebar, I will remove this show model class.
And I cannot see the model that's beautiful and the last component that I would want to set up in my
structure is of the sidebar.
So it is right here and in the sidebar will right away iterate over our data.
So if you remember the last project, we were setting up data separately.
And if you check out the data, yes, you'll notice something familiar where we have links.
So long story and then also social.
So if you didn't watch the previous project, please do so because I'm not going to repeat myself.
But I would want in a sidebar is to iterate over the links and social and then, of course, display
them.
So we go to our sidebar, which, by the way, lost in the process.
And I would want to go with a side.
So in the sidebar, we're going to go with a side and then let's add class names again.
There's going to be toggle functionality.
So we might as well right away set up a template string and one class that I would always want on my
sidebar in the sidebar class and then also show sidebar class.
So that's the one that is responsible for displaying or highlighting the sidebar.
So if the class is on and of course you'll be able to see the sidebar, if not, then of course it is
going to be hidden.
Then inside of the sidebar, we're going to go with sidebar at her.
And in here, I would want to place my logo, which of course, I already imported.
So I go with the logo, then source on this logo as well.
Last name also would be awesome.
So we're going to go with Logo here as far as the alternative would go with coding addict like.
So I'm not I would want to have a button which eventually will close the sidebar.
So we go with button, we add a class name, class name here is Close Hyphen BGN and then instead of
the button we go with F.A.A. and times like so so we save it.
That should be our sidebar.
Beautiful at least the header and lan right next to the header.
We're going to go with our links.
So on here I go with on our list our class name of links.
So we go here with links and then in the links on our list, I would want to iterate over my array of
links that is coming from my data and line for every item that I have there.
I'm just going to access it as a link.
All the structured right away in your text and the icon as well, because if you'll notice in this project,
we also have the icon.
So I just added more bells and whistles to our data.
That's why not only we have the URL text, but we also have the icon and forever link.
I would want to return a list item, then I'll use my key.
I'll set it equal to the 80 and then of course I have my link.
I'll pass in the URL and the inside of the link.
There's going to be two things the icon and then the text as well.
So I can save it.
I should see my links.
Beautiful.
And then lastly in the sidebar, right next to the first on our list, there's going to be another one
and a class name here of social icons, social icons.
And then in here, let's iterate over social.
All right.
That is coming from data.
And then I'll name each item a link.
And again, we'll structure it from that item, the euro and the icon.
And that one is equal to my link primeur.
And then, of course, what are we returning?
We go with list item again.
The same spiel will go with idee.
And then instead of the list item, we go with a link.
Then I will be equal to my YORO property that is coming from my object.
And then I also want to place my on our separate.
And now I have everything.
I have the links and I have social media now in order to toggle or we would use this sidebar.
So once the class is ready I cannot see it.
And then once the class is added, I can see the sidebar.
So our remote and then of course in the next video will start setting up the functionality where once
we click on the buttons, then of course we can either show and hide the model or same thing for the
sidebar.