All right.
And before we set up theme toggle container, let's also take care of the styles.
So we're going to navigate to wrappers again.
And we're looking for the logout container.
Essentially, we want to remove all of these styles first.
This is going to be the look and we'll start by setting up the entire component.
As position relative.
Why?
Well, because this logout button is going to be position absolute.
And again, we want to use our parent to control it and therefore, we'll set it up here as position
relative.
Then let's start with that logout button.
Log out hyphen BTN so we get some global styles for the button and now we are working with the actual
button.
First we'll go with Display Flex because I have three things over there.
I have two icons as well as the text and I want to make sure that all of them are in the center.
So we'll go with align Item Center.
Now also we're going to go with justify content and same deal.
We'll set it equal to center, then we'll add some gap.
We're going to go with zero and then 0.5 REM.
So pretty much this is going to be the gap in between the columns.
So we don't have any rows.
So this is going to be equal to zero.
And this pretty much concludes the actual logout button.
Then we're going to go with IMG.
Now we don't have that image.
So this is something that's coming up a little bit later.
For now, we're just going to go with width, 25 pixels, then height.
25 pixels and also the border radius.
Again, this is something we're not going to see right now since we don't have any users.
But eventually this is going to be the style for the small image we're going to display right next to
the name.
And then let's work on that dropdown effectively where we have the logout button.
So dropdown.
That's the class.
And like I kept saying, position is going to be absolute.
Let's save that.
And then we want to go with top 45 pixels.
So this is going to be 45 pixels from the top left will be zero.
And then we want to go with width 100%.
Then let's add some box shadow.
This will be equal to Var and then second shadow.
And after that we want to set up a text align and we'll set it equal to center.
Then.
We want to hide it by default.
And therefore we'll set it equal to visibility.
Eden.
And then let's also add the border radius and the background.
So border radius is going to be equal to the CSS variable.
Var border radius.
And also we want to set up the background.
So background is going to be equal to.
Var hyphen hyphen, primary and 500.
Let's save this again.
It's hidden by default since we have visibility hidden.
Now we just need to add the class of show dropdown.
Show dropdown.
And this will be equal to visibility.
Visible again.
Let's go back over here.
Let's set it up as visible and check it out the moment we click.
Now we can actually see our logout button.
And now we just want to target the dropdown button.
So basically button inside of that div and style it as well.
So let's target the class first dropdown and hyphen BTN and here we want to go with border radius and
we'll set it equal to var and hyphen hyphen border radius and also we'll go with padding and we'll set
it to 0.5.
Rims.
Okay, Awesome.
And you know what?
Let me go back to Logout Container and let's set it equal to true.
So that way we can clearly see everything what we have.
And then right after the padding, let's go with background, transparent and border color transparent.
So background equals to transparent.
Same deal is going to be for the border color.
So let's remove border color and then color will be white.
So let's set up over here.
Color.
Var hyphen hyphen white.
Then we want to go with letter spacing and text transform.
So letter.
Spacing.
And we'll set it equal to our CSS variable.
So letter spacing.
And then we have text transform.
I'll set that one equal to capitalize.
And after that, we want to go cursor.
Pointer.
So when we're hovering, notice we'll get the cursor.
But I want that dropdown BTN to be spanning.
Pretty much all the cross this div because at the moment notice only if I hover over the button, I
get that cursor pointer and in order to change that we want to go here with 1%.
And then also we want to go with height.
And we'll set it equal to 100% and now everything is going to work.
So notice the moment I hover over the main div, I'll right away get the styles.
So this is going to conclude the styles for the logout container.