-
Notifications
You must be signed in to change notification settings - Fork 2
/
AdminLayout.razor
96 lines (85 loc) · 4.54 KB
/
AdminLayout.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
@inherits LayoutComponentBase
@inject ServiceStackStateProvider AuthStateProvider;
@inject NavigationManager NavigationManager;
@inject IJSRuntime JS
@inject CachedLocalStorage LocalStorage
<div>
<Header />
<div class="absolute mt-4 right-4">
<button type="button" class=@CssUtils.ClassNames("bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500") role="switch" aria-checked="false" @onclick="toggleDark">
<span class=@CssUtils.ClassNames(!BlazorConfig.Instance.DarkMode ? "translate-x-5" : "translate-x-0", "pointer-events-none relative inline-block h-5 w-5 rounded-full bg-white dark:bg-gray-900 shadow transform ring-0 transition ease-in-out duration-200")>
<span class=@CssUtils.ClassNames(!BlazorConfig.Instance.DarkMode ? "opacity-0 ease-out duration-100" : "opacity-100 ease-in duration-200", "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity") aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3Z" /></svg>
</span>
<span class=@CssUtils.ClassNames(!BlazorConfig.Instance.DarkMode ? "opacity-100 ease-in duration-200" : "opacity-0 ease-out duration-100", "absolute inset-0 h-full w-full flex items-center justify-center transition-opacity") aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-indigo-600" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6ZM5.394 6.813L6.81 5.399l3.505 3.506L8.9 10.319zM2 15.005h5v2H2zm3.394 10.193L8.9 21.692l1.414 1.414l-3.505 3.506zM15 25.005h2v5h-2zm6.687-1.9l1.414-1.414l3.506 3.506l-1.414 1.414zm3.313-8.1h5v2h-5zm-3.313-6.101l3.506-3.506l1.414 1.414l-3.506 3.506zM15 2.005h2v5h-2z" /></svg>
</span>
</span>
</button>
</div>
<div class="flex flex-col flex-1">
<main class="flex-1">
<div class="py-6">
<div class="sm:px-6 md:px-8">
@Body
</div>
</div>
</main>
</div>
</div>
@code {
[CascadingParameter] protected Task<AuthenticationState>? AuthenticationStateTask { get; set; }
bool hasRedered = false;
protected override async Task OnParametersSetAsync()
{
await base.OnParametersSetAsync();
await setDarkModeIfChanged();
}
async Task logout()
{
await AuthStateProvider.LogoutAsync();
NavigationManager.NavigateTo(NavigationManager.GetLoginUrl(), true);
}
async Task toggleDark()
{
BlazorConfig.Instance.ToggleDarkMode();
await setColorScheme();
StateHasChanged();
}
async Task setDarkModeIfChanged()
{
if (hasRedered)
{
var colorScheme = await LocalStorage.GetStringAsync("color-scheme");
var darkModePref = colorScheme == "dark";
var darkModeClass = await JS.InvokeAsync<bool>("JS.containsClass", "html", "dark"); // dark mode forced in MainLayout
if (BlazorConfig.Instance.DarkMode != darkModePref || darkModePref != darkModeClass)
{
BlazorConfig.Instance.ToggleDarkMode(darkModePref);
await setColorScheme();
StateHasChanged();
}
}
}
async Task setColorScheme()
{
if (BlazorConfig.Instance.DarkMode)
{
await LocalStorage.SetStringAsync("color-scheme", "dark");
await JS.InvokeVoidAsync("JS.addClass", "html", "dark");
}
else
{
await LocalStorage.SetStringAsync("color-scheme", "light");
await JS.InvokeVoidAsync("JS.removeClass", "html", "dark");
}
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
hasRedered = true;
await setDarkModeIfChanged();
}
}
}