decePubClient/Shared/NavMenu.razor

@inherits LocalizableComponentBase

<nav class="flex justify-between items-center md:items-start pt-3 px-3 md:p-0">

	<div class="relative md:w-52">
		<DButton Size="DSize.Sm" class="md:hidden" OnClick="ToggleNavMenu">
			<i class="ion-md-menu text-lg"></i>
		</DButton>
		<div class="absolute bg-base-100 md:relative top-full md:top-auto mt-2 w-52 md:w-full overflow-y-auto rounded-lg neo-raised neo-sm md:shadow-none! z-50 @menuToggle md:block">
			<div class="flex flex-col gap-3 p-3 md:p-4">

				@if (CascadingState.IsSignedIn)
				{
					<DDropdown @bind-IsOpen="isPersonaMenuOpen" CloseOnContentClick="true" class="w-full rounded-xl bg-cover bg-no-repeat bg-right"
							   TriggerClass="flex w-full gap-3 p-3 md:p-4 neo-raised neo-xs rounded-xl text-left cursor-pointer"
							   ContentClass="mt-2 flex flex-col gap-2 p-2 rounded-box w-full" title="@Localizer["Switch persona"]"
							   style="@PersonaBackground">
						<Trigger>
							<img alt="" class="h-8 w-8 md:h-12 md:w-12 flex-none object-cover rounded-full neo-raised neo-2xs"
								 src="@(CascadingState.Persona?.Avatar ?? "imgs/icon-192.png")" />
							<span class="flex flex-col w-full min-w-0 gap-1">
								<b class="truncate" title="@CascadingState.Persona?.Name">@(CascadingState.Persona?.Name ?? Localizer["No persona"])</b>
								<span class="truncate text-xs opacity-70">@(CascadingState.Persona is { } persona ? "@" + persona.Acct : null)</span>
							</span>
							<i class="ion-md-swap self-center opacity-60"></i>
						</Trigger>
						<ChildContent>
							@foreach (var persona in CascadingState.Personas)
							{
								<DButton Size="DSize.Sm" class="justify-start whitespace-nowrap" Active="persona.Id == CascadingState.PersonaId"
										 Disabled="IsDefaultDisabled || persona.Id == CascadingState.PersonaId" OnClick="() => SwitchPersona(persona.Id)">
									<img alt="" class="h-5 w-5 object-cover rounded-full" src="@(persona.PictureURL ?? "imgs/icon-192.png")" />
									<span class="truncate">@(persona.Name ?? persona.UserName)</span>
								</DButton>
							}
						</ChildContent>
					</DDropdown>
				}

				<NavLink ActiveClass="btn-active" class="btn justify-start" href="/" Match="NavLinkMatch.All">
					<i class="ion-md-home"></i>
					<span>@Localizer["Home"]</span>
				</NavLink>
				@if (CascadingState.IsSignedIn)
				{
					<NavLink ActiveClass="btn-active" class="btn justify-start" href="search">
						<i class="ion-md-search"></i>
						<span>@Localizer["Search"]</span>
					</NavLink>
					<NavLink ActiveClass="btn-active" class="btn justify-start" href="explore">
						<i class="ion-md-compass"></i>
						<span>@Localizer["Explore"]</span>
					</NavLink>
					<NavLink ActiveClass="btn-active" class="btn justify-start" href="lists">
						<i class="ion-md-list"></i>
						<span>@Localizer["Lists"]</span>
					</NavLink>
					@if (CascadingState.PersonaId is { } personaId)
					{
						<NavLink ActiveClass="btn-active" class="btn justify-start" href="@($"account/{Uri.EscapeDataString(personaId)}")">
							<i class="ion-md-person"></i>
							<span>@Localizer["My profile"]</span>
						</NavLink>
					}
				}
				<NavLink ActiveClass="btn-active" class="btn justify-start" href="settings">
					<i class="ion-md-settings"></i>
					<span>@Localizer["Settings"]</span>
				</NavLink>
				<AuthorizeView Policy="@Policies.IsModerator">
					<NavLink ActiveClass="btn-active" class="btn justify-start" href="administration">
						<i class="ion-md-switch text-error"></i>
						<span>@Localizer["Administration"]</span>
					</NavLink>
				</AuthorizeView>
				@if (CascadingState.IsSignedIn)
				{
					<NavLink ActiveClass="btn-active" class="btn justify-start" href="logout">
						<i class="ion-md-log-out text-error"></i>
						<span>@Localizer["Logout"]</span>
					</NavLink>
				}
				else
				{
					<NavLink ActiveClass="btn-active" class="btn justify-start" href="login">
						<i class="ion-md-log-in text-success"></i>
						<span>@Localizer["Login"]</span>
					</NavLink>
				}

				<div class="flex items-center gap-3">
					<DButton Size="DSize.Sm" Shape="DButtonShape.Circle" class="flex-none" OnClick="ResetToOriginalColour"
							 title="@Localizer["Reset"]">
						<i class="ion-md-refresh"></i>
					</DButton>
					<DRange TValue="short" class="neo-hue-track w-full" Size="DSize.Xs" Min="0" Max="359" Step="1"
							Value="ThemeIndexColour" ValueChanged="UpdateThemeColour" ValueExpression="() => ThemeIndexColour" />
				</div>

				<div class="flex justify-end">
					<DToggle Value="IsDark" ValueChanged="UpdateThemeDarkMode" ValueExpression="() => IsDark">
						<UncheckedIcon>
							<i class="ion-md-sunny"></i>
						</UncheckedIcon>
						<CheckedIcon>
							<i class="ion-md-moon"></i>
						</CheckedIcon>
					</DToggle>
				</div>

			</div>
		</div>
	</div>

	<div class="md:hidden">
		<img alt="" class="h-[30px]" src="imgs/icon-512.png">
	</div>

	<div class="md:hidden">
		<a class="block rounded-full neo-raised neo-2xs" href="settings">
			<img alt="@CascadingState.Persona?.Name" class="object-cover w-[30px] h-[30px] rounded-full"
				 src="@(CascadingState.Persona?.Avatar ?? "imgs/icon-192.png")">
		</a>
	</div>

</nav>

@code {
	string menuToggle = "hidden";
	bool isPersonaMenuOpen;

	string PersonaBackground => CascadingState.Persona?.Header is { Length: > 0 } header && !header.Contains("/missing-")
		? $"background-image:linear-gradient(to left, var(--color-base-100) 55%, transparent), url('{header}');"
		: null;

	// The toggle and the slider work on the variant that is showing; with system theming that is the OS's choice.
	bool IsDark => CascadingState.Status.IsDarkTheme();
	short ThemeIndexColour => IsDark ? CascadingState.PublicCacheData.PageSettings.DarkThemeIndexColour : CascadingState.PublicCacheData.PageSettings.LightThemeIndexColour;

	protected override void OnInitialized()
	{
		IsLoading = false;
		if (!CascadingState.Status.IsMobileMedia())
			menuToggle = default;
	}

	async Task SwitchPersona(string personaId)
	{
		var result = await CascadingState.SwitchPersona(personaId);
		if (result.IsInvalid)
			Toast.AddResponseError(result);
	}

	private void ToggleNavMenu()
	{
		menuToggle = menuToggle is { Length: > 0 } ? default : "hidden";
	}

	protected async Task ResetToOriginalColour()
	{
		var isDark = IsDark;
		await CascadingState.UpdatePageSettings(settings => settings.SetHue(isDark,
			isDark ? PageSettings.DefaultDarkThemeIndexColour : PageSettings.DefaultLightThemeIndexColour));

		// if (AuthData?.User != null)
		// {
		// 	AuthData.User.UserSettings.ThemeIndexColour = ThemeIndexColour;
		// 	await Storage.SetItemAsync(nameof(AuthData), AuthData);
		// }
	}

	// Picking a hue also leaves the grey themes, which otherwise ignore it.
	protected async Task UpdateThemeColour(short indexColour)
	{
		var isDark = IsDark;
		await CascadingState.UpdatePageSettings(settings => settings.SetHue(isDark, indexColour));

		// if (AuthData?.User != null)
		// {
		// 	AuthData.User.UserSettings.ThemeIndexColour = ThemeIndexColour;
		// 	await Storage.SetItemAsync(nameof(AuthData), AuthData);
		// }
	}

	// Choosing light or dark here leaves system theming; Settings can turn it back on.
	protected async Task UpdateThemeDarkMode(bool isDarkMode)
	{
		await CascadingState.UpdatePageSettings(settings => settings.SetDarkMode(isDarkMode));

		// if (AuthData?.User != null)
		// {
		// 	AuthData.User.UserSettings.ThemeIsDarkMode = ThemeIsDarkMode;
		// 	await Storage.SetItemAsync(nameof(AuthData), AuthData);
		// }
	}
}