Navigation drawer can close, sorted occupation buffs

ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor

@@ -1,8 +1,9 @@
 @using Telerik.Blazor.Components
 @inherits LayoutComponentBase
+
 <div class="page">
-    <div class="sidebar">
+    <div class="sidebar @(_isNavCollapsed ? "collapsed" : "")">
-        <NavMenu/>
+        <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;
+    }
+}

ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor.css

@@ -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 {

ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor

@@ -1,59 +1,140 @@
-<div class="top-row ps-3 navbar navbar-dark">
+<div class="nav-wrapper d-flex flex-column h-100 @(IsCollapsed ? "is-collapsed" : "")">
-    <div class="container-fluid">
+    <div class="top-row navbar navbar-dark d-flex align-items-center @(IsCollapsed ? "justify-content-center px-1" : "justify-content-between px-3")">
-        <a class="navbar-brand d-flex align-items-center" href="">
+            @if (!IsCollapsed)
-            <span class="brand-glow me-2">✦</span>
+            {
-            <span class="brand-text">ZeroSpace</span>
+                <a class="navbar-brand d-flex align-items-center me-0" href="" title="ZeroSpace Database & Command Hub">
-        </a>
+                    <span class="brand-glow me-2">✦</span>
-        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
+                    <span class="brand-text">ZeroSpace</span>
-            <span class="navbar-toggler-icon"></span>
+                </a>
-        </button>
+                <div class="d-flex align-items-center">
-    </div>
+                    <button type="button" class="btn btn-sm btn-nav-toggle nav-toggle-btn"
-</div>
+                            @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">
+            <nav class="nav flex-column">
-        <div class="nav-item px-3">
+                <div class="nav-item @(IsCollapsed ? "px-1" : "px-3")">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
+                    <NavLink class="nav-link" href="" Match="NavLinkMatch.All" title="Home">
-                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span>
+                        <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span>
-                <span>Home</span>
+                        @if (!IsCollapsed)
-            </NavLink>
+                        {
+                            <span class="nav-text">Home</span>
+                        }
+                    </NavLink>
+                </div>
+                <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>
+                        @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 @(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>
+                        @if (!IsCollapsed)
+                        {
+                            <span class="nav-text">Star Systems</span>
+                        }
+                    </NavLink>
+                </div>
+                <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>
+                        @if (!IsCollapsed)
+                        {
+                            <span class="nav-text">Masteries</span>
+                        }
+                    </NavLink>
+                </div>
+                <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>
+                        @if (!IsCollapsed)
+                        {
+                            <span class="nav-text">Units</span>
+                        }
+                    </NavLink>
+                </div>
+            </nav>
         </div>
-        <div class="nav-item px-3">
+
-            <NavLink class="nav-link" href="galaxy">
+        <div class="sidebar-footer p-2 nav-toggle-btn">
-                <span class="bi bi-galaxy-nav-menu" aria-hidden="true"></span>
+            <button type="button" class="btn btn-nav-toggle-footer w-100 d-flex align-items-center justify-content-center"
-                <span>Galaxy Map</span>
+                    @onclick="ToggleCollapse"
-                <span class="badge badge-nav-live ms-auto">MAP</span>
+                    title="@(IsCollapsed ? "Expand sidebar" : "Collapse sidebar")"
-            </NavLink>
+                    aria-label="@(IsCollapsed ? "Expand sidebar" : "Collapse sidebar")">
+                @if (IsCollapsed)
+                {
+                    <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 class="nav-item px-3">
+    </div>
-            <NavLink class="nav-link" href="StarSystem">
-                <span class="bi bi-star-systems-nav-menu" aria-hidden="true"></span>
-                <span>Star Systems</span>
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="SystemMastery">
-                <span class="bi bi-masteries-nav-menu" aria-hidden="true"></span>
-                <span>Masteries</span>
-            </NavLink>
-        </div>
-        <div class="nav-item px-3">
-            <NavLink class="nav-link" href="units">
-                <span class="bi bi-units-nav-menu" aria-hidden="true"></span>
-                <span>Units</span>
-            </NavLink>
-        </div>
-    </nav>
-</div>
 
 @code {
-    private bool collapseNavMenu = true;
+    [Parameter]
+    public bool IsCollapsed { get; set; } = false;
 
-    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;
+    [Parameter]
+    public EventCallback<bool> IsCollapsedChanged { get; set; }
 
-    private void ToggleNavMenu()
+    private bool _collapseMobileNav = true;
+
+    private string? NavMenuCssClass => _collapseMobileNav ? "collapse" : null;
+
+    private async Task ToggleCollapse()
     {
-        collapseNavMenu = !collapseNavMenu;
+        IsCollapsed = !IsCollapsed;
+        await IsCollapsedChanged.InvokeAsync(IsCollapsed);
     }
 
+    private void ToggleMobileMenu()
+    {
+        _collapseMobileNav = !_collapseMobileNav;
+    }
+
+    private void OnNavMenuClick()
+    {
+        _collapseMobileNav = true;
+    }
 }

ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor.css

@@ -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;
+    }
+}

ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor

@@ -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>