All right.
And up next, I want to work on toggle dropdown functionality more centrally.
The idea is that every time the user clicks on the button, we either hide or show the logo dropped
on and then we'll set up the logout functionality as well.
So.
Let's navigate back to our enemy.
And essentially, it's as straightforward as it gets.
I want to set up a state value.
My I'm going to show logout and then the function name will be set.
Show logout.
I want to invoke this every time I click on this button.
So make sure you set up the logic in the first button.
And essentially, the reason why we want to go with our function is because we are passing the value
in this case.
So I don't want to invoke this pretty much when my application starts.
I only want to invoke this when I click the button.
And then when it comes to the actual dropdown, if you take a look at CIUSSS, you'll see that I have
the dropdown class and show dropdown class and essentially only when the show dropdown class is present.
Then I display the dropdown, and if it's not present, then it's an ad based on show logout value coming
from the state.
I'll either add the class or it's just going to be a dropdown, and if we put two and two together,
that's how we'll toggle the dropdown.
So let's navigate back to our nav bar and line.
First one, he is going to be our state bar and I thought I already imported the used state.
I guess not.
So let me go import used state Nevada is coming from react in this case.
Then we want to set up that state of our cost and I'm looking for show logout and the set show logout.
That's the function name and that is equal to my used state.
And by default, I'm going to go with false.
And before we invoke anything in my button here, why don't we just take a look how everything looks
like as far as the conditional rendering?
So instead of drop down and show dropped on what I'm going to do here, where I have the class name,
I'll go with Carlos.
So first, I want to have my expression and I'm going to look for show logo.
Now, if this is true, then we want to go with this functionality.
Basically, these two classes copy and paste.
However, if it is false, then we just go with a dropdown over here.
Let's save it.
And what you should see once you navigate your application is the fact that dropdown right now is hidden,
so we don't display it again.
If you're interested, more Mournes here says please navigate to a wrapper file.
More specifically, nav bar wrapper.
And now what are we want to do?
Well?
I want to invoke the set show logout every time I click this button.
Correct.
So let's go here and let's say set shall logout.
And again, we're going to go with opposite value.
Whatever is the current value, I want to set it to the opposite.
Navigate back.
And what do you know?
Now, once I click my hide or show the dropdown, and that's how we can set up our toggle functionality
for our dropdown.