decePubClient/Shared/NavMenu.razor

@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;
	}
}