74 lines
2.8 KiB
Plaintext
74 lines
2.8 KiB
Plaintext
@* Sidebar header *@
|
|
<div class="flex h-14 items-center border-b border-sidebar-border px-4">
|
|
<button type="button"
|
|
class="flex items-center gap-2 font-semibold text-sidebar-foreground rounded-md transition-colors hover:bg-sidebar-accent px-1 py-1"
|
|
title="Toggle sidebar"
|
|
@onclick="HandleToggle">
|
|
<img src="enci_white.svg" alt="Logo" class="h-6 w-6 shrink-0 transition-transform duration-300" />
|
|
@if (!Collapsed)
|
|
{
|
|
<span class="text-sm tracking-tight">Enciphered</span>
|
|
}
|
|
</button>
|
|
</div>
|
|
|
|
@* Navigation *@
|
|
<div class="flex flex-col gap-1 p-3">
|
|
@if (!Collapsed)
|
|
{
|
|
<p class="mb-1 px-2 text-xs font-medium uppercase tracking-wider text-muted-foreground">
|
|
Navigation
|
|
</p>
|
|
}
|
|
|
|
<NavLink class="@NavLinkClass" href="" Match="NavLinkMatch.All"
|
|
ActiveClass="bg-sidebar-accent text-accent-foreground"
|
|
@onclick="HandleNav"
|
|
title="Home">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8" />
|
|
<path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
|
|
</svg>
|
|
@if (!Collapsed)
|
|
{
|
|
<span>Home</span>
|
|
}
|
|
</NavLink>
|
|
|
|
<NavLink class="@NavLinkClass" href="weather"
|
|
ActiveClass="bg-sidebar-accent text-accent-foreground"
|
|
@onclick="HandleNav"
|
|
title="Weather">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M17.5 19H9a7 7 0 1 1 6.71-9h1.79a4.5 4.5 0 1 1 0 9Z" />
|
|
</svg>
|
|
@if (!Collapsed)
|
|
{
|
|
<span>Weather</span>
|
|
}
|
|
</NavLink>
|
|
</div>
|
|
|
|
@code {
|
|
[Parameter] public bool Collapsed { get; set; }
|
|
[Parameter] public EventCallback OnToggleSidebar { get; set; }
|
|
[Parameter] public EventCallback OnNavigated { get; set; }
|
|
|
|
private string NavLinkClass => Collapsed
|
|
? "nav-link group flex items-center justify-center rounded-md p-2 text-sm font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent"
|
|
: "nav-link group flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-sidebar-foreground transition-colors hover:bg-sidebar-accent";
|
|
|
|
private async Task HandleToggle()
|
|
{
|
|
if (OnToggleSidebar.HasDelegate)
|
|
await OnToggleSidebar.InvokeAsync();
|
|
}
|
|
|
|
private async Task HandleNav()
|
|
{
|
|
if (OnNavigated.HasDelegate)
|
|
await OnNavigated.InvokeAsync();
|
|
}
|
|
}
|
|
|