Navigation drawer can close, sorted occupation buffs
This commit is contained in:
6d486f49
@@ -1,8 +1,9 @@
|
||||
@using Telerik.Blazor.Components
|
||||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
<div class="sidebar">
|
||||
<NavMenu/>
|
||||
<div class="sidebar @(_isNavCollapsed ? "collapsed" : "")">
|
||||
<NavMenu IsCollapsed="_isNavCollapsed" IsCollapsedChanged="OnNavCollapsedChanged" />
|
||||
</div>
|
||||
|
||||
<main>
|
||||
@@ -13,3 +14,12 @@
|
||||
</article>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool _isNavCollapsed = false;
|
||||
|
||||
private void OnNavCollapsedChanged(bool isCollapsed)
|
||||
{
|
||||
_isNavCollapsed = isCollapsed;
|
||||
}
|
||||
}
|
||||
@@ -70,6 +70,11 @@ main {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
flex-shrink: 0;
|
||||
transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.sidebar.collapsed {
|
||||
width: 72px;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
|
||||
@@ -1,59 +1,140 @@
|
||||
<div class="top-row ps-3 navbar navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand d-flex align-items-center" href="">
|
||||
<div class="nav-wrapper d-flex flex-column h-100 @(IsCollapsed ? "is-collapsed" : "")">
|
||||
<div class="top-row navbar navbar-dark d-flex align-items-center @(IsCollapsed ? "justify-content-center px-1" : "justify-content-between px-3")">
|
||||
@if (!IsCollapsed)
|
||||
{
|
||||
<a class="navbar-brand d-flex align-items-center me-0" href="" title="ZeroSpace Database & Command Hub">
|
||||
<span class="brand-glow me-2">✦</span>
|
||||
<span class="brand-text">ZeroSpace</span>
|
||||
</a>
|
||||
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
|
||||
<div class="d-flex align-items-center">
|
||||
<button type="button" class="btn btn-sm btn-nav-toggle nav-toggle-btn"
|
||||
@onclick="ToggleCollapse"
|
||||
title="Collapse navigation"
|
||||
aria-label="Collapse navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5M10 8a.5.5 0 0 1-.5.5H4.207l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.207 7.5H9.5a.5.5 0 0 1 .5.5"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button title="Navigation menu" class="navbar-toggler" @onclick="ToggleMobileMenu">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="d-flex align-items-center justify-content-center gap-1 w-100">
|
||||
<a class="navbar-brand d-flex align-items-center m-0 p-0" href="" title="ZeroSpace Database & Command Hub">
|
||||
<span class="brand-glow">✦</span>
|
||||
</a>
|
||||
<button type="button" class="btn btn-sm btn-nav-toggle nav-toggle-btn"
|
||||
@onclick="ToggleCollapse"
|
||||
title="Expand navigation"
|
||||
aria-label="Expand navigation">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.5 15a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-1 0v13a.5.5 0 0 0 .5.5M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
|
||||
<div class="@NavMenuCssClass nav-scrollable flex-grow-1" @onclick="OnNavMenuClick">
|
||||
<nav class="nav flex-column">
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<div class="nav-item @(IsCollapsed ? "px-1" : "px-3")">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All" title="Home">
|
||||
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span>
|
||||
<span>Home</span>
|
||||
@if (!IsCollapsed)
|
||||
{
|
||||
<span class="nav-text">Home</span>
|
||||
}
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="galaxy">
|
||||
<div class="nav-item @(IsCollapsed ? "px-1" : "px-3")">
|
||||
<NavLink class="nav-link" href="galaxy" title="Galaxy Map">
|
||||
<span class="bi bi-galaxy-nav-menu" aria-hidden="true"></span>
|
||||
<span>Galaxy Map</span>
|
||||
@if (!IsCollapsed)
|
||||
{
|
||||
<span class="nav-text">Galaxy Map</span>
|
||||
<span class="badge badge-nav-live ms-auto">MAP</span>
|
||||
}
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="StarSystem">
|
||||
<div class="nav-item @(IsCollapsed ? "px-1" : "px-3")">
|
||||
<NavLink class="nav-link" href="StarSystem" title="Star Systems">
|
||||
<span class="bi bi-star-systems-nav-menu" aria-hidden="true"></span>
|
||||
<span>Star Systems</span>
|
||||
@if (!IsCollapsed)
|
||||
{
|
||||
<span class="nav-text">Star Systems</span>
|
||||
}
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="SystemMastery">
|
||||
<div class="nav-item @(IsCollapsed ? "px-1" : "px-3")">
|
||||
<NavLink class="nav-link" href="SystemMastery" title="Masteries">
|
||||
<span class="bi bi-masteries-nav-menu" aria-hidden="true"></span>
|
||||
<span>Masteries</span>
|
||||
@if (!IsCollapsed)
|
||||
{
|
||||
<span class="nav-text">Masteries</span>
|
||||
}
|
||||
</NavLink>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="units">
|
||||
<div class="nav-item @(IsCollapsed ? "px-1" : "px-3")">
|
||||
<NavLink class="nav-link" href="units" title="Units">
|
||||
<span class="bi bi-units-nav-menu" aria-hidden="true"></span>
|
||||
<span>Units</span>
|
||||
@if (!IsCollapsed)
|
||||
{
|
||||
<span class="nav-text">Units</span>
|
||||
}
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
private bool collapseNavMenu = true;
|
||||
|
||||
private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
|
||||
|
||||
private void ToggleNavMenu()
|
||||
<div class="sidebar-footer p-2 nav-toggle-btn">
|
||||
<button type="button" class="btn btn-nav-toggle-footer w-100 d-flex align-items-center justify-content-center"
|
||||
@onclick="ToggleCollapse"
|
||||
title="@(IsCollapsed ? "Expand sidebar" : "Collapse sidebar")"
|
||||
aria-label="@(IsCollapsed ? "Expand sidebar" : "Collapse sidebar")">
|
||||
@if (IsCollapsed)
|
||||
{
|
||||
collapseNavMenu = !collapseNavMenu;
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M3.5 15a.5.5 0 0 0 .5-.5v-13a.5.5 0 0 0-1 0v13a.5.5 0 0 0 .5.5M6 8a.5.5 0 0 0 .5.5h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L12.293 7.5H6.5A.5.5 0 0 0 6 8"/>
|
||||
</svg>
|
||||
}
|
||||
else
|
||||
{
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16" class="me-2">
|
||||
<path fill-rule="evenodd" d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5M10 8a.5.5 0 0 1-.5.5H4.207l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.207 7.5H9.5a.5.5 0 0 1 .5.5"/>
|
||||
</svg>
|
||||
<span class="fs-7 text-uppercase fw-semibold">Collapse</span>
|
||||
}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter]
|
||||
public bool IsCollapsed { get; set; } = false;
|
||||
|
||||
[Parameter]
|
||||
public EventCallback<bool> IsCollapsedChanged { get; set; }
|
||||
|
||||
private bool _collapseMobileNav = true;
|
||||
|
||||
private string? NavMenuCssClass => _collapseMobileNav ? "collapse" : null;
|
||||
|
||||
private async Task ToggleCollapse()
|
||||
{
|
||||
IsCollapsed = !IsCollapsed;
|
||||
await IsCollapsedChanged.InvokeAsync(IsCollapsed);
|
||||
}
|
||||
|
||||
private void ToggleMobileMenu()
|
||||
{
|
||||
_collapseMobileNav = !_collapseMobileNav;
|
||||
}
|
||||
|
||||
private void OnNavMenuClick()
|
||||
{
|
||||
_collapseMobileNav = true;
|
||||
}
|
||||
}
|
||||
@@ -113,19 +113,99 @@
|
||||
border-color: rgba(56, 189, 248, 0.15);
|
||||
}
|
||||
|
||||
.btn-nav-toggle {
|
||||
background-color: rgba(56, 189, 248, 0.08);
|
||||
border: 1px solid rgba(56, 189, 248, 0.25);
|
||||
color: #38bdf8;
|
||||
border-radius: 6px;
|
||||
padding: 0.35rem 0.5rem;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.btn-nav-toggle:hover {
|
||||
background-color: rgba(56, 189, 248, 0.18);
|
||||
border-color: rgba(56, 189, 248, 0.5);
|
||||
color: #7dd3fc;
|
||||
box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
|
||||
}
|
||||
|
||||
.btn-nav-toggle-footer {
|
||||
background-color: rgba(15, 23, 42, 0.6);
|
||||
border: 1px solid rgba(56, 189, 248, 0.15);
|
||||
color: #94a3b8;
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 0.75rem;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-nav-toggle-footer:hover {
|
||||
background-color: rgba(56, 189, 248, 0.12);
|
||||
border-color: rgba(56, 189, 248, 0.35);
|
||||
color: #38bdf8;
|
||||
box-shadow: 0 0 8px rgba(56, 189, 248, 0.2);
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
border-top: 1px solid rgba(56, 189, 248, 0.12);
|
||||
background: rgba(8, 12, 20, 0.5);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.is-collapsed .nav-item {
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.is-collapsed .nav-item ::deep a {
|
||||
justify-content: center;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.is-collapsed .bi {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.is-collapsed .sidebar-footer {
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.nav-toggle-btn {
|
||||
display: inline-flex !important;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: none;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.collapse {
|
||||
/* Never collapse the sidebar for wide screens */
|
||||
display: block;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.nav-scrollable {
|
||||
/* Allow sidebar to scroll for tall menus */
|
||||
height: calc(100vh - 3.75rem);
|
||||
height: calc(100vh - 3.75rem - 3.25rem);
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640.98px) {
|
||||
.nav-toggle-btn {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -311,7 +311,7 @@
|
||||
else
|
||||
{
|
||||
<ul class="bonus-list list-unstyled mb-0">
|
||||
@foreach (var bonus in FactionBonuses)
|
||||
@foreach (var bonus in FactionBonuses.OrderBy(b => b.Label))
|
||||
{
|
||||
<li class="bonus-row">
|
||||
<span class="bonus-total">@FormatBonusTotal(bonus)</span>
|
||||
|
||||
Reference in New Issue
Block a user