And once we have the logout container in place, let's also work on the theme toggle container.
And effectively, we want to go to components.
We want to create a new one and let's call this theme.
Toggle gsx.
Let's create the component.
Let's save.
And then this is going to be the case where, again, I'm going to copy and paste some imports from
the Readme.
So we're looking for these two icons.
So basically based on a theme will display either sun or moon.
And we also want to get the wrapper as well as the global context.
And from the global context, the dashboard one, we want to get the value.
So what is going to be the theme value as well as the function, the toggle dark theme.
And pretty much every time we'll click on our button, we'll toggle the theme.
Now, instead of the button based on a theme, we'll either display one icon or the second one.
So let's get going again.
I'm going to grab these imports just so we can speed this up a little bit.
And then inside of the theme toggle first, let's grab both of those things from the dashboard context.
So first we want to get is dark theme and second, we want to get the function.
Now, again, as far as the function, at the moment we're just logging stuff.
That's okay.
We'll change that in a second.
So we're going to go here with use dashboard context, then we'll set it equal to a wrapper.
And since this component effectively is going to be a button, we right away can go with onClick.
Here and we'll invoke the toggle dark theme.
Now, inside of the wrapper, we'll check what is the value.
And of course, at the moment it's hardcoded.
That's totally fine.
We'll still be able to check everything.
And then if it's true, then we'll display the sun.
At least that was my approach.
This is totally up to you.
We'll add the class, something we're going to style in a second.
So toggle icon.
Then let's close the component.
And if it's not the case, then we want to go with the moon one.
So pretty much the bootstrap one and then the moon.
Let's save it.
Now let's navigate to a nav bar.
Correct.
And we want to grab the theme toggle as well.
We set up the.
Or import?
Yep, that's the one.
And now check it out.
Once we refresh, we should see.
Our icon.
And since it is false, right now we're actually displaying the moon.
But if I'm going to go to a dashboard context, effectively the dashboard layout.
Over here.
And if I'll change this one to true.
Manually, you'll see how right away it will display the sun.
So if it's a dark theme, then essentially I'm just displaying the sun over here which signals to the
user that he or she can flip the value.
And if of course this is false.
If it's a light theme, then of course I display the moon.
But this is totally up to you.
If you want to flip these icons, that's definitely an option.
So we're getting this from the use dashboard context and eventually, of course, we'll invoke some
functionality once we click on the icon, because at the end of the day, it is a button what we're
returning from this component.