Moonlight-Panel/Moonlight
2
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated sidebar and header

Browse Source
This commit is contained in:
ChiaraBm
2025-03-30 17:54:07 +02:00
parent 3f511cefa8
commit e1c0722fce
5 changed files with 238 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
Moonlight.Client/UI/Partials/AppHeader.razor
View File

@@ -1,93 +1,49 @@
@using Microsoft.AspNetCore.Components.Authorization
@using MoonCore.Blazor.Tailwind.Auth
@using Moonlight.Client.UI.Layouts
@using Moonlight.Client.UI.Layouts
@inject ToastService ToastService
@inject NavigationManager Navigation
@inject AuthenticationStateManager AuthStateManager
<div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 bg-gray-800/60 backdrop-blur px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
@if (!Layout.ShowMobileNavigation)
{
<button @onclick="Layout.ToggleMobileNavigation" type="button" class="-m-2.5 p-2.5 text-gray-700 lg:hidden">
<span class="sr-only">Open sidebar</span>
<i class="icon-menu text-xl"></i>
</button>
}
<div class="h-6 w-px bg-gray-800 lg:hidden" aria-hidden="true"></div>
<div class="flex justify-between gap-x-4 lg:gap-x-6 w-full">
<div></div>
<div class="flex items-center gap-x-4 lg:gap-x-6">
<div class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10" aria-hidden="true"></div>
<div class="relative">
<button @onclick="ToggleProfileNav" @onfocusout="ProfileNav_OnFocusOut" type="button" class="-m-1.5 flex items-center p-1.5" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="/img/pfp_placeholder.png" alt="">
<span class="hidden lg:flex lg:items-center">
<span class="ml-4 text-sm font-semibold leading-6 text-gray-100" aria-hidden="true">
@("@" + Username)
</span>
<svg class="ml-2 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd"/>
</svg>
</span>
</button>
<div class="@(ShowProfileNav ? "opacity-100" : "opacity-0 hidden") transition ease-out duration-100 absolute right-0 z-10 mt-2.5 w-44 origin-top-right rounded-md bg-gray-750 py-2 shadow-lg ring-1 ring-gray-100/5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
<a @onclick="Logout" @onclick:preventDefault href="#" class="block px-3 py-1 text-sm leading-6 text-gray-100 hover:text-primary-500" role="menuitem" tabindex="-1" id="user-menu-item-1">Sign out</a>
</div>
</div>
</div>
<header class="flex items-center px-4 lg:hidden border-b border-white/5">
<div class="py-2.5">
<span class="relative">
<button @onclick="Layout.ToggleMobileNavigation" aria-label="Open navigation"
class="relative flex min-w-0 items-center gap-3 rounded-lg p-2 text-left text-base/6 sm:text-sm/5 text-white"
type="button">
<i class="icon-menu text-xl"></i>
</button>
</span>
</div>
</div>
<div class="min-w-0 flex-1">
<nav class="flex flex-1 items-center gap-4 py-2.5">
<div aria-hidden="true" class="-ml-4 flex-1">
</div>
<div class="flex items-center gap-3">
<span class="relative">
<div class="relative flex min-w-0 cursor-default items-center gap-3 rounded-lg p-2 text-left text-base/6 font-medium sm:text-sm/5 text-white">
<div data-slot="avatar"
class="inline-grid shrink-0 align-middle">
<img
class="h-8 rounded-full"
src="/img/pfp_placeholder.png"
alt=""/>
</div>
</div>
</span>
</div>
</nav>
</div>
</header>
@code
{
[Parameter] public MainLayout Layout { get; set; }
[CascadingParameter] public Task<AuthenticationState> AuthState { get; set; }
private bool ShowProfileNav = false;
private string Username;
protected override async Task OnInitializedAsync()
{
var identity = await AuthState;
var usernameClaim = identity.User.Claims.ToArray().First(x => x.Type == "username");
Username = usernameClaim.Value;
}
protected override Task OnAfterRenderAsync(bool firstRender)
{
if(!firstRender)
if (!firstRender)
return Task.CompletedTask;
Layout.OnStateChanged += () => InvokeAsync(StateHasChanged);
return Task.CompletedTask;
}
private async Task ToggleProfileNav()
{
ShowProfileNav = !ShowProfileNav;
await InvokeAsync(StateHasChanged);
}
private Task ProfileNav_OnFocusOut()
{
Task.Run(async () =>
{
await Task.Delay(200);
ShowProfileNav = false;
await InvokeAsync(StateHasChanged);
});
return Task.CompletedTask;
}
private async Task Logout()
=> await AuthStateManager.Logout();
}
}