225 lines
8.1 KiB
Plaintext
225 lines
8.1 KiB
Plaintext
@inherits LocalizableComponentBase
|
|
|
|
<nav class="flex justify-between align-center pt-3 px-3 md:p-0">
|
|
|
|
<div class="relative md:w-52">
|
|
<button class="button is-rounded inline-flex is-small neoBtnSmall relative md:hidden" @onclick="ToggleNavMenu">
|
|
<i class="ion-md-menu text-lg"></i>
|
|
</button>
|
|
<div class="absolute background md:relative top-full md:top-auto mt-2 w-52 md:w-full overflow-y-auto rounded-lg neomorph is-nsmall md:shadow-none z-50 @menuToggle md:block">
|
|
<div class="flex flex-col space-y-3 p-3 md:p-4">
|
|
|
|
<div class="flex space-x-3 p-3 md:p-4 neomorph is-nxsmall rounded-xl bg-cover bg-no-repeat bg-right" style="background-image:linear-gradient(to left, var(--background) 55%, transparent), url('@(CascadingState.User?.BackgroundUrl)');">
|
|
<a class="block h-8 w-8 md:h-12 md:w-12 flex-none" href="@CascadingState.User?.ProfileUrl" title="@CascadingState.User?.UserName">
|
|
<img alt="@CascadingState.User?.UserName" class="h-8 w-8 md:h-12 md:w-12 object-cover rounded-full neomorph is-nxxsmall" src="@(CascadingState.User?.PictureUrl ?? "/imgs/icon-192.png")" />
|
|
</a>
|
|
<div class="flex flex-col w-full min-w-0 space-y-2">
|
|
<p class="shrink truncate">
|
|
<b title="@CascadingState.User?.DisplayName">
|
|
@CascadingState.User?.DisplayName
|
|
</b>
|
|
</p>
|
|
<p class="flex-1 min-w-6 truncate text-xs">
|
|
<a class="underline" href="@CascadingState.User?.ProfileUrl" title="@CascadingState.User?.UserName">
|
|
@CascadingState.User?.UserName
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="/" Match="NavLinkMatch.All">
|
|
<span class="icon is-left">
|
|
<i class="ion-md-home"></i>
|
|
</span>
|
|
<span>@Localizer["Home"]</span>
|
|
</NavLink>
|
|
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="settings">
|
|
<span class="icon is-left">
|
|
<i class="ion-md-settings"></i>
|
|
</span>
|
|
<span>@Localizer["Settings"]</span>
|
|
</NavLink>
|
|
@*<AuthorizeView>
|
|
<Authorized>
|
|
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button is-rounded neoBtnSmallPlain" href="administration">
|
|
@Localizer["Administration"]
|
|
</NavLink>
|
|
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button is-rounded neoBtnSmallPlain" href="logout">
|
|
@Localizer["Logout"]
|
|
</NavLink>
|
|
</Authorized>
|
|
<NotAuthorized>
|
|
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button is-rounded neoBtnSmallPlain" href="login">
|
|
@Localizer["Login"]
|
|
</NavLink>
|
|
</NotAuthorized>
|
|
</AuthorizeView>*@
|
|
|
|
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="administration">
|
|
<span class="icon is-left has-text-danger">
|
|
<i class="ion-md-switch"></i>
|
|
</span>
|
|
<span>@Localizer["Administration"]</span>
|
|
</NavLink>
|
|
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="login">
|
|
<span class="icon is-left has-text-success">
|
|
<i class="ion-md-log-in"></i>
|
|
</span>
|
|
<span>@Localizer["Login"]</span>
|
|
</NavLink>
|
|
<NavLink ActiveClass="neoBtnSmallInsetPlain" class="button has-icons-left is-rounded neoBtnSmallPlain" href="logout">
|
|
<span class="icon is-left has-text-danger">
|
|
<i class="ion-md-log-out"></i>
|
|
</span>
|
|
<span>@Localizer["Logout"]</span>
|
|
</NavLink>
|
|
|
|
<div class="field is-grouped is-align-items-center">
|
|
<div class="control">
|
|
<button @onclick:stopPropagation @onclick:preventDefault @onclick="ResetToOriginalColour" class="button is-rounded has-icons-left is-small mb-0 ml-0 neoBtn" style="background:hsl(25,84%,88%) !important"
|
|
type="button">
|
|
<span class="icon is-left"></span>
|
|
</button>
|
|
</div>
|
|
<div class="control is-expanded is-flex">
|
|
<input class="neoRange fullwidth" id="ColourIndex_@(RandomId)"
|
|
max="359" min="0" @onchange="UpdateThemeColour" step="1" type="range" value="@ThemeIndexColour">
|
|
</div>
|
|
</div>
|
|
|
|
<EditForm class="field is-grouped is-grouped-right" Context="DarkModeForm" Model="ThemeIsDarkMode">
|
|
<div class="control">
|
|
<label>
|
|
<InputCheckbox class="toggle-checkbox"
|
|
Value="ThemeIsDarkMode" ValueChanged="async v => await UpdateThemeDarkMode(v)" ValueExpression="() => ThemeIsDarkMode" />
|
|
<div class="toggle-slot neomorph is-nxxsmall cursor-pointer">
|
|
<div class="sun-icon-wrapper">
|
|
<div class="sun-icon">
|
|
<i class="ion-md-sunny text-xs"></i>
|
|
</div>
|
|
</div>
|
|
<div class="toggle-button"></div>
|
|
<div class="moon-icon-wrapper">
|
|
<div class="moon-icon">
|
|
<i class="ion-md-moon text-xs"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</EditForm>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:hidden">
|
|
<img alt="" class="h-[30px]" src="imgs/icon-512.png">
|
|
</div>
|
|
|
|
<div class="md:hidden">
|
|
<a class="neomorph is-nxxsmall" href="settings">
|
|
<img alt="@CascadingState.User?.UserName" class="object-cover w-[30px] h-[30px] rounded-full"
|
|
src="@CascadingState.User?.PictureUrl">
|
|
</a>
|
|
|
|
@* <button class="button is-rounded is-small has-icons-left neoBtnSmall "> *@
|
|
@* $1$ <AuthorizeView> #1# *@
|
|
@* $1$ <Authorized> #1# *@
|
|
@* $1$ <span class="icon is-left"> #1# *@
|
|
@* $1$ <img alt="@CascadingState.User.UserName" class="object-cover" src="@CascadingState.User.PictureUrl"> #1# *@
|
|
@* $1$ </span> #1# *@
|
|
@* $1$ </Authorized> #1# *@
|
|
@* $1$ <NotAuthorized> #1# *@
|
|
@* $1$ <span class="icon is-left"> #1# *@
|
|
@* $1$ <i class="ion-md-person"></i> #1# *@
|
|
@* $1$ </span> #1# *@
|
|
@* $1$ </NotAuthorized> #1# *@
|
|
@* $1$ </AuthorizeView> #1# *@
|
|
@* </button> *@
|
|
</div>
|
|
|
|
</nav>
|
|
|
|
@code {
|
|
[CascadingParameter] CascadingState CascadingState { get; set; }
|
|
string menuToggle = "hidden";
|
|
bool IsThemeChanging { get; set; } = false;
|
|
bool ThemeIsDarkMode { get; set; } = false;
|
|
short ThemeIndexColour { get; set; } = 25;
|
|
int RandomId { get; set; }
|
|
|
|
protected override async Task OnInitializedAsync()
|
|
{
|
|
await Task.Run(() =>
|
|
{
|
|
});
|
|
RandomId = Random.Shared.Next(0, int.MaxValue);
|
|
if (!CascadingState.Status.IsMobileMedia())
|
|
menuToggle = default;
|
|
|
|
ThemeIsDarkMode = CascadingState.PublicCacheData?.PageSettings.ThemeIsDarkMode ?? false;
|
|
ThemeIndexColour = ThemeIsDarkMode ? CascadingState.PublicCacheData?.PageSettings.DarkThemeIndexColour ?? 215 :
|
|
CascadingState.PublicCacheData?.PageSettings.LightThemeIndexColour ?? 25;
|
|
}
|
|
|
|
private void ToggleNavMenu()
|
|
{
|
|
menuToggle = menuToggle is { Length: > 0 } ? default : "hidden";
|
|
}
|
|
|
|
protected async Task ResetToOriginalColour()
|
|
{
|
|
IsThemeChanging = true;
|
|
CascadingState.PublicCacheData.PageSettings.LightThemeIndexColour =
|
|
ThemeIndexColour =
|
|
25;
|
|
|
|
// if (AuthData?.User != null)
|
|
// {
|
|
// AuthData.User.UserSettings.ThemeIndexColour = ThemeIndexColour;
|
|
// await Storage.SetItemAsync(nameof(AuthData), AuthData);
|
|
// }
|
|
|
|
await CascadingState.UpdatePublicCache(CascadingState.PublicCacheData);
|
|
|
|
IsThemeChanging = false;
|
|
}
|
|
|
|
protected async Task UpdateThemeColour(ChangeEventArgs eventArgs)
|
|
{
|
|
IsThemeChanging = true;
|
|
var indexColour = short.Parse(eventArgs.Value?.ToString());
|
|
CascadingState.PublicCacheData.PageSettings.LightThemeIndexColour =
|
|
ThemeIndexColour =
|
|
indexColour;
|
|
|
|
// if (AuthData?.User != null)
|
|
// {
|
|
// AuthData.User.UserSettings.ThemeIndexColour = ThemeIndexColour;
|
|
// await Storage.SetItemAsync(nameof(AuthData), AuthData);
|
|
// }
|
|
|
|
await CascadingState.UpdatePublicCache(CascadingState.PublicCacheData);
|
|
|
|
IsThemeChanging = false;
|
|
}
|
|
|
|
protected async Task UpdateThemeDarkMode(bool isDarkMode)
|
|
{
|
|
IsThemeChanging = true;
|
|
CascadingState.PublicCacheData.PageSettings.ThemeIsDarkMode =
|
|
ThemeIsDarkMode = isDarkMode;
|
|
Console.WriteLine("Dark updated {0}", ThemeIsDarkMode);
|
|
|
|
// if (AuthData?.User != null)
|
|
// {
|
|
// AuthData.User.UserSettings.ThemeIsDarkMode = ThemeIsDarkMode;
|
|
// await Storage.SetItemAsync(nameof(AuthData), AuthData);
|
|
// }
|
|
|
|
await CascadingState.UpdatePublicCache(CascadingState.PublicCacheData);
|
|
|
|
IsThemeChanging = false;
|
|
}
|
|
} |