OK, we come here in the bar dogs and in the left hand side, we need to provide some like the new links
for the screen, for the small screen size.
We'll will create another two for the links for the smaller screen size, so we'll call that we'll give
the class name to that.
They've been call it.
Done the hair done.
Links.
Okay, now we'll copy all of this on the links in this copy.
Yesterday inside this tent.
David, for.
This is done, and now let me just go ahead and check your browser if things are well.
Can we just.
Increase the size I can see now the links are not going and all the links are not going, and if we
decrease the size, they are there and if we increase the size, they are there, but we don't want
these links to like, always show up.
We need a battle like like this.
You can see this this button hand robot icon.
We need this kind of icon, right?
So that when you click that, I can only then these links and these links should show up.
So to get that button, we will have to import that icon from material way.
So I've already told you that we have installed material way and we'll be using material icons in our
project.
So we'll use a button and use an icon, which is called.
In side of scientists digging, there's a time to look.
OK, so here we will write the order.
And let me just take you.
We want this icon.
The letter just copied this import code here, and they just copied it, and let's just go back to the
Vasco editor and we'll import that.
I can hear, OK, we've imported that item, so we'll be placing this icon here below the tags, like
after the link tags that should appear.
So.
Surrender, this icon really just tried the name of this one here.
And copy just basic and, of course, will provide a self-closing tag.
And if.
And this icon will be inside of the button, right?
It's a button.
It will provide a button.
Work done, and, of course, but is putting does need are closing back.
So let me just wrap this item.
Around this icon, me, Milosevic, then we when we go to the browser and then we check our website.
So there is some error.
OK.
Is error there node modules that it does not install?
Let me just take a look at it.
OK, so when we try to Google this error.
The open Stack Overflow, so, you know, in developing in developing websites or in programming Googling
that the most important skill you need to have, the skill you need to know what to Google any and only
if you you just need to google it.
So I googled the error and on the star go through, there's a solution that I need to install this package.
So I just copy this command and just go back to my.
He is called upon Mike Dominante again.
Let me just close the store, just install what it's saying, so let's see if this works out.
It's not compulsory that this will work out like you need to do her dental and you need to, like,
keep doing things and something like something or the other works out.
So this will be installed.
And let's see if if this is this solution works or not, but once installed, we'll run that out again,
then we'll check it again if the solution works out or not.
OK, so that is install.
Let me not run again and be in stock.
Let me just first clear this mess.
You know, we learn and be start.
Then the server will be started again.
And have we done anything wrong in the importing?
I guess no.
We've imported it correctly and.
I hope this works and.
And then we come back to the browser and it's loading for.
I think the developments are what is starting and.
Well, the solution which you tried.
We are getting an again, so if I google this error on StackOverflow, there's a solution that you need
to install this and the material was has updated its website like a few days back.
So that is why we are getting all these letters and we are not the only ones who are getting this.
These are, like many people, have been getting news that are so if you get it us while developing
your project.
So don't worry at all.
Errors are the building blocks of your coding career, so don't worry about it.
Let me just write whatever is shown in the solution on Stack Overflow, and you need to just keep on
trying like this and it all just get resolved at the point.
And if it doesn't, you need to check one more time, like what is wrong with the code or something
like that?
So once this is done, let me let me just run the server again and to see if this if this works this
time.
So this is just to create a pattern and.
OK, this this hour is up and running, let us just go back to the browser and check if it's working
now, OK, so it works and it's running and we can't see the button because it's also in black colour
and it got mixed with the color of the nav.
But if you just minimise minimize the whole.
You can see it in the between, but its color is black, so that's why it's not showing up.
That will change the color of it, don't worry.
And now we go back to the.
Browser.
And.
And to the escort, and then we'll take a look at the success that it's showing, the color of the button
is black or will you call them that CSIS and.
Coloring on the pattern or color should be.
OK, so what I noticed here is that in the seasons I did the number go to the button that the button
will not show.
If the screen sizes more than 600 pixels, it will only be less than 600 pixels.
So it's also not needed in the next few weeks, only in the mobile room.
So let me just show you how it looks now.
So this is how it will look, and if I increase the size, it will disappear into five degrees or so
it will come.
So we need to add a functionality to it so that when we click this link should show up and they will
disappear again.
So let me just go back to school and.
So now let's add to to our project status and then component now states will be responsible for the
shooting and hiring of the baton, so to use it.
You need to imported from the act that is import use the.
Bomb.
Yeah.
Or you can just ride above also, if you don't need to write another line, you can just give a comma
here.
It's early braces.
It was stick, right?
Now let me show you what is your state and what it can do.
So let me just write first.
So links.
Maybe start.
That so.
Links.
And equal to sign and provided a value.
Maybe once.
Oh, let me explain this weird thing to you if you don't know this, so.
This is the syntax of defining a state.
Now.
These two things here are very, very important.
The first thing will define the state as a constant and this is an array, and this will contain two
things, which is the first thing is the variable which will store the value of the state.
And the second one is the function which will execute whenever we want to like change or give another
value to the variable.
So we need to call this function and balance that value to this function.
And this is the initial value of this short links variable.
Initially, it is false.
Now we need to change this when we click the button, right when we click the button, the links should
show up or disappear like that.
So in the left hand side of that, do we need to provide an ID, right?
ID?
And he'll be will right, GSX like JavaScript, obviously.
So for that, we need we'll write a final statement in line if I made a statement.
So I'll explain you why I'm writing this and how that works.
So first of all, let me make sure links links.
Then the question mark and now, if so, length is true.
Then.
And you will right the condition, what needs to be the value of this idea, what needs to like Kate
return from this all, so we will return.
Open.
And if it is false, this column means if it returns a false value, then we will return clues as simple
as that.
And now we'll create on click function in this and like whenever we click the button, some function,
shall they go right?
So in this button will create an on click.
On Click.
And inside this, we will write function, maybe we can we can write above also.
There's no compulsion and there's no compulsion at all that we have right above or below function can
be in line also like the federal function.
And you can write it above.
Also, like we can define a function here and type function.
The name of the function may be so.
Click click function.
Then we provide the value to it.
So when this function gets called, so that means when the button gets clicked, so we trigger this
function, right?
So when this function gets called, we need to set the value off like we need to post this thing at
our side, show links and we need to pass the value of the reverse of whatever it is currently look
like, for example.
Now I click the button, so it should show up the links.
Now, even hour, if just imagine the links are already show like we have already click the button.
Now we need the links to disappear, right?
So it should make reverse of the value which was there previously.
For that, we will use a nought operator.
This is a logical nought operator.
Now it will reverse the value like what was the previous value?
Previous, when it was show links.
That's it for this.
So this is it, and now we'll call this function on Click.
One click will create will call this function click.
Let me just say it.
And.
When we go back to our browser.
Let me just refresh.
Falls does not yet incredible.
So what is the weather here?
OK, OK, OK, I made a mistake.
I made a mistake.
I admit it.
Let me just go here and here we need to provide an A..
OK, let me just say it again.
Again, we are having the same issue.
OK, I forgot something, I got a phone call, tried to use two to lose.
And then we provide the spending.
So that was my bag.
Let me just save it.
And then we go back again.
And then we'll refresh it.
And now when I try to decide that this.
OK, now we are in the mobile view, and when I click it, you'll see this links are visible.
And when I click it again, they will disappear.
This is all the work of the youth state and on click function, which we created.
So this is all for the know what we are done.
We are, I guess you would not be seeing.
Oh, let me just show it again.
So when I decrease sides to see when I click the link show up and when I click it again, the links
disappear.
So this was the use of the youth to tide.
This was the all use of the youth state we created and the on click function, which we have attached
with the button.
So this was this was it for the never.