Improved nav menu layout

This commit is contained in:
Mia Rose Winter 2024-01-14 19:58:57 +01:00
parent cc8efee25f
commit 0f006a7159
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
2 changed files with 49 additions and 33 deletions

View file

@ -15,19 +15,11 @@
</div> </div>
<div class="navbar-center"></div> <div class="navbar-center"></div>
<div class="navbar-end"> <div class="navbar-end">
<ul class="menu menu-horizontal"> <ul class="menu menu-horizontal gap-2">
<AuthorizeView> <AuthorizeView>
<Authorized> <Authorized>
<li> <li>
<NavLink ActiveClass="tab-active" class="tab" href="Account/Manage"> <NavLink ActiveClass="tab-active" href="Account/Manage">
@if (context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value is { } id) {
<div class="avatar">
<div class="w-12 rounded">
<img src="/api/user/pfp/@id" alt="" loading="lazy"
onerror="this.remove()" />
</div>
</div>
}
@context.User.Identity?.Name @context.User.Identity?.Name
</NavLink> </NavLink>
</li> </li>
@ -35,20 +27,44 @@
<form action="Account/Logout" method="post"> <form action="Account/Logout" method="post">
<AntiforgeryToken /> <AntiforgeryToken />
<input type="hidden" name="ReturnUrl" value="@_currentUrl" /> <input type="hidden" name="ReturnUrl" value="@_currentUrl" />
<button type="submit" class="">Logout</button> <button type="submit" class="flex gap-2">
Logout
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M3 4.25A2.25 2.25 0 0 1 5.25 2h5.5A2.25 2.25 0 0 1 13 4.25v2a.75.75 0 0 1-1.5 0v-2a.75.75 0 0 0-.75-.75h-5.5a.75.75 0 0 0-.75.75v11.5c0 .414.336.75.75.75h5.5a.75.75 0 0 0 .75-.75v-2a.75.75 0 0 1 1.5 0v2A2.25 2.25 0 0 1 10.75 18h-5.5A2.25 2.25 0 0 1 3 15.75V4.25Z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M6 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H6.75A.75.75 0 0 1 6 10Z" clip-rule="evenodd" />
</svg>
</button>
</form> </form>
</li> </li>
</Authorized> </Authorized>
<NotAuthorized> <NotAuthorized>
<li> <li>
<NavLink href="Account/Login">Login</NavLink> <NavLink href="Account/Login">
Login
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
<path fill-rule="evenodd" d="M17 4.25A2.25 2.25 0 0 0 14.75 2h-5.5A2.25 2.25 0 0 0 7 4.25v2a.75.75 0 0 0 1.5 0v-2a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-.75.75h-5.5a.75.75 0 0 1-.75-.75v-2a.75.75 0 0 0-1.5 0v2A2.25 2.25 0 0 0 9.25 18h5.5A2.25 2.25 0 0 0 17 15.75V4.25Z" clip-rule="evenodd" />
<path fill-rule="evenodd" d="M1 10a.75.75 0 0 1 .75-.75h9.546l-1.048-.943a.75.75 0 1 1 1.004-1.114l2.5 2.25a.75.75 0 0 1 0 1.114l-2.5 2.25a.75.75 0 1 1-1.004-1.114l1.048-.943H1.75A.75.75 0 0 1 1 10Z" clip-rule="evenodd" />
</svg>
</NavLink>
</li> </li>
<li> <li>
<NavLink href="Account/Register">Register</NavLink> <NavLink href="Account/Register">
Register
</NavLink>
</li> </li>
</NotAuthorized> </NotAuthorized>
</AuthorizeView> </AuthorizeView>
</ul> </ul>
<AuthorizeView>
@if (context.User.FindFirst(ClaimTypes.NameIdentifier)?.Value is { } id) {
<div class="avatar">
<div class="w-8 rounded">
<img src="/api/user/pfp/@id" alt="" loading="lazy"
onerror="this.remove()" />
</div>
</div>
}
</AuthorizeView>
</div> </div>
</div> </div>
<div class="flex justify-center bg-base-300"> <div class="flex justify-center bg-base-300">

File diff suppressed because one or more lines are too long