All right.
And once we have the small sidebar, big sidebar, as well as the nav bar, now let's complete and work
on the toggle one as well as the logout component.
So if we take a look at the complete project, you'll notice over here this icon.
So in here we'll control the theme and in here we'll have option to log out and also will display.
A small avatar of the user, essentially a picture if it's present and there's going to be option to
log out.
And I guess let's start working on that log out container.
And before you ask, yes, technically it's only a button with a drop down menu.
And here we have the log out option.
But I will set it up as a separate component because there's going to be quite a bit of functionality.
And this is one of those tricky things where you notice that such a small component actually has quite
a bit of functionality.
So we want to start by navigating to components and we want to create a logout container.
That's how I'm going to call it.
Let's create the component.
And after that, we're looking for few imports.
Now, since auto imports have been letting me down lately, and since I don't want to waste too much
time on the imports, I'm going to go to read me.
Let me find.
Where is our logout container?
And I'll just copy and paste in order to speed this up.
And then I'm going to cover what are we importing over here?
So let me copy and paste.
So these are two icons we're going to use, and you'll see in a second why then.
This is a wrapper.
Essentially.
This is where we'll get all of our styles.
We'll have use state because in order to show or hide this logout, we'll use the local state.
And that is actually my preference.
If I can, I try to set up the state locally.
Now, of course there's going to be.
Some instances where it's impossible to do.
You'll need a global state value, but whenever you can, at least it's my preference to set up the
local state value because that way it's easier to pretty much maintain the application because you right
away see all of the logic in that one component.
And also we will need a logout user functionality.
Now at the moment, of course it's only logging stuff, but eventually, yes, we will invoke it and
there's going to be some more logic in there and therefore we have this use dashboard context as well.
And I guess let's start by setting up this local state value.
So now I'm talking about that logout button, whether I want to showcase it or not.
So there's going to be show logout and set.
Show.
Log out and we'll set it equal to use state and we'll set it as a default one to false.
And now let's also grab two values.
From our dashboard context.
First one is going to be user, which again, we're hard coding right now.
That's totally fine.
And also we want to grab the log out user.
And we'll set it equal to the user dashboard context and we're good to go.
Now, as far as the return, we're going to go here with wrapper.
So that's our component.
And let's start.
By setting up a button over here.
So type will be equal to a button.
Then as far as the class names, we're going to go here with BTN and log out hyphen BTN.
Now on click.
It's going to be equal to an arrow function and essentially the same deal.
Since we want to toggle the logout button, we will use set show logout and we will set it equal to
the opposite value.
So whatever is the current value.
Get the opposite one.
So we'll go with Show Logout.
Now inside of this button.
Here's what we want to do.
We want to display the user name and we want to display the icon.
Now, eventually there's going to be an image, but we won't worry about it right now.
And you know what?
I think it's going to be easier if we can see what we're working on.
So now let me navigate to the nav bar and we want to grab the component, of course.
So in this case, we're looking for the logout container.
So let's go here with import then logout container.
And remember in the BTN container we have the text right now.
So now let's set up these components.
Now at the moment we only have one, so let's place it here.
But yes, the toggle container is also going to be here.
Let me save let me refresh.
And of course I didn't save it here.
So that's my bad.
Let me refresh one more time.
And yep, this is what we should see.
So we have nothing in the button and therefore we just see the button.
But.
We'll work on this right now.
So like I said.
Effectively, there's going to be three values.
There's going to be a picture.
If it's present.
If not, then we'll just display the avatar.
Then we'll have the name of the user.
In this case, it's going to be hard coded.
And then we'll have also a little icon that showcases that.
We can click on the icon.
So let's start with the.
Avatar.
So for now, we don't have the picture for sure.
And therefore I'll use this component.
Effectively the icon.
Then let me grab the user.
If it's present, then let me get the name.
So I'm using optional chaining and then we'll also add this second icon.
And this is going to be our look.
So this is our log out container.
And right next to this button we'll have a div and inside of that div will invoke the log out one.
So let's go here with div.
The class names are going to be dropdown and show dropdown.
So again, same deal.
We'll be toggling based on this show log out value.
So let's set up I guess here a div class name and let's right away set up the logic show log out.
And we'll use the ternary operator.
So drop down.
And show dropdown.
And if it's false, then we'll just go with drop down.
So effectively we don't display it if it's false.
Same logic like in a small sidebar.
Big one and all that.
And then inside of this div we're going to go with button type is going to be equal to a button.
Then class name will be drop.
Down hyphen btn.
And onClick we will invoke logout user.
Of course there is no functionality apart from console log for now, but eventually we'll change that
and therefore I'm going to go here with on.
Click and let's set it to Logout User.
Let's save it.
And now notice.
Since this is false, of course we don't display it, but the moment I click.
I display my logout button and essentially in the console we'll see the logout user.
So this is going to be our logout container.