1
00:00:00,020 --> 00:00:06,650
And once we have the logout container in place, let's also work on the theme toggle container.

2
00:00:06,890 --> 00:00:09,980
And effectively, we want to go to components.

3
00:00:10,010 --> 00:00:14,030
We want to create a new one and let's call this theme.

4
00:00:15,410 --> 00:00:17,560
Toggle gsx.

5
00:00:17,630 --> 00:00:19,520
Let's create the component.

6
00:00:20,410 --> 00:00:21,310
Let's save.

7
00:00:21,310 --> 00:00:27,790
And then this is going to be the case where, again, I'm going to copy and paste some imports from

8
00:00:27,790 --> 00:00:28,450
the Readme.

9
00:00:28,480 --> 00:00:30,610
So we're looking for these two icons.

10
00:00:30,610 --> 00:00:35,320
So basically based on a theme will display either sun or moon.

11
00:00:35,680 --> 00:00:40,090
And we also want to get the wrapper as well as the global context.

12
00:00:40,090 --> 00:00:44,950
And from the global context, the dashboard one, we want to get the value.

13
00:00:44,950 --> 00:00:51,190
So what is going to be the theme value as well as the function, the toggle dark theme.

14
00:00:51,370 --> 00:00:57,120
And pretty much every time we'll click on our button, we'll toggle the theme.

15
00:00:57,130 --> 00:01:04,360
Now, instead of the button based on a theme, we'll either display one icon or the second one.

16
00:01:04,360 --> 00:01:06,670
So let's get going again.

17
00:01:06,670 --> 00:01:10,840
I'm going to grab these imports just so we can speed this up a little bit.

18
00:01:11,760 --> 00:01:18,390
And then inside of the theme toggle first, let's grab both of those things from the dashboard context.

19
00:01:18,390 --> 00:01:23,220
So first we want to get is dark theme and second, we want to get the function.

20
00:01:23,320 --> 00:01:28,080
Now, again, as far as the function, at the moment we're just logging stuff.

21
00:01:28,110 --> 00:01:28,910
That's okay.

22
00:01:28,920 --> 00:01:30,230
We'll change that in a second.

23
00:01:30,240 --> 00:01:37,680
So we're going to go here with use dashboard context, then we'll set it equal to a wrapper.

24
00:01:38,570 --> 00:01:45,740
And since this component effectively is going to be a button, we right away can go with onClick.

25
00:01:46,620 --> 00:01:49,890
Here and we'll invoke the toggle dark theme.

26
00:01:49,920 --> 00:01:53,580
Now, inside of the wrapper, we'll check what is the value.

27
00:01:53,580 --> 00:01:55,510
And of course, at the moment it's hardcoded.

28
00:01:55,530 --> 00:01:57,150
That's totally fine.

29
00:01:57,540 --> 00:01:59,550
We'll still be able to check everything.

30
00:01:59,550 --> 00:02:04,050
And then if it's true, then we'll display the sun.

31
00:02:04,730 --> 00:02:06,110
At least that was my approach.

32
00:02:06,110 --> 00:02:07,520
This is totally up to you.

33
00:02:07,940 --> 00:02:11,270
We'll add the class, something we're going to style in a second.

34
00:02:11,270 --> 00:02:12,920
So toggle icon.

35
00:02:13,070 --> 00:02:14,780
Then let's close the component.

36
00:02:14,780 --> 00:02:19,280
And if it's not the case, then we want to go with the moon one.

37
00:02:19,370 --> 00:02:22,640
So pretty much the bootstrap one and then the moon.

38
00:02:22,640 --> 00:02:24,170
Let's save it.

39
00:02:24,200 --> 00:02:26,930
Now let's navigate to a nav bar.

40
00:02:26,940 --> 00:02:27,590
Correct.

41
00:02:27,800 --> 00:02:31,520
And we want to grab the theme toggle as well.

42
00:02:31,760 --> 00:02:33,320
We set up the.

43
00:02:34,370 --> 00:02:35,270
Or import?

44
00:02:35,390 --> 00:02:37,030
Yep, that's the one.

45
00:02:37,040 --> 00:02:38,300
And now check it out.

46
00:02:38,330 --> 00:02:41,420
Once we refresh, we should see.

47
00:02:42,300 --> 00:02:43,260
Our icon.

48
00:02:43,380 --> 00:02:48,450
And since it is false, right now we're actually displaying the moon.

49
00:02:48,690 --> 00:02:56,790
But if I'm going to go to a dashboard context, effectively the dashboard layout.

50
00:02:57,650 --> 00:02:58,310
Over here.

51
00:02:58,310 --> 00:03:00,290
And if I'll change this one to true.

52
00:03:00,320 --> 00:03:05,480
Manually, you'll see how right away it will display the sun.

53
00:03:05,480 --> 00:03:12,470
So if it's a dark theme, then essentially I'm just displaying the sun over here which signals to the

54
00:03:12,470 --> 00:03:16,340
user that he or she can flip the value.

55
00:03:16,520 --> 00:03:18,890
And if of course this is false.

56
00:03:19,510 --> 00:03:22,840
If it's a light theme, then of course I display the moon.

57
00:03:22,840 --> 00:03:24,520
But this is totally up to you.

58
00:03:24,550 --> 00:03:29,680
If you want to flip these icons, that's definitely an option.

59
00:03:29,680 --> 00:03:37,000
So we're getting this from the use dashboard context and eventually, of course, we'll invoke some

60
00:03:37,000 --> 00:03:44,650
functionality once we click on the icon, because at the end of the day, it is a button what we're

61
00:03:44,650 --> 00:03:46,780
returning from this component.