From 9ea38c0322af4670cb08984522b008dffca25f87 Mon Sep 17 00:00:00 2001 From: 6d486f49 <76097bcc@gmail.com> Date: Mon, 28 Sep 2026 21:08:59 -0400 Subject: [PATCH] Navigation drawer can close, sorted occupation buffs --- .../ZeroSpace.Web/Layout/MainLayout.razor | 16 +- .../ZeroSpace.Web/Layout/MainLayout.razor.css | 5 + ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor | 177 +++++++++++++----- .../ZeroSpace.Web/Layout/NavMenu.razor.css | 86 ++++++++- ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor | 2 +- 5 files changed, 231 insertions(+), 55 deletions(-) diff --git a/ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor b/ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor index bcc50b5..451fdd8 100644 --- a/ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor +++ b/ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor @@ -1,8 +1,9 @@ @using Telerik.Blazor.Components @inherits LayoutComponentBase +
-
- +
+
@@ -12,4 +13,13 @@
-
\ No newline at end of file +
+ +@code { + private bool _isNavCollapsed = false; + + private void OnNavCollapsedChanged(bool isCollapsed) + { + _isNavCollapsed = isCollapsed; + } +} \ No newline at end of file diff --git a/ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor.css b/ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor.css index 2103f55..44005e0 100644 --- a/ZeroSpace/ZeroSpace.Web/Layout/MainLayout.razor.css +++ b/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 { diff --git a/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor b/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor index 1a6b694..2631430 100644 --- a/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor +++ b/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor @@ -1,59 +1,140 @@ -
-
- - ✦ - ZeroSpace - - -
-
+
+
+ @if (!IsCollapsed) + { + + ✦ + ZeroSpace + +
+ + +
+ } + else + { +
+ + ✦ + + +
+ } +
-
- -
+
@code { - private bool collapseNavMenu = true; + [Parameter] + public bool IsCollapsed { get; set; } = false; - private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null; + [Parameter] + public EventCallback 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; + } } \ No newline at end of file diff --git a/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor.css b/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor.css index f6e22ae..cf26d56 100644 --- a/ZeroSpace/ZeroSpace.Web/Layout/NavMenu.razor.css +++ b/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; + } +} diff --git a/ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor b/ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor index 2bc844c..cf9dcea 100644 --- a/ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor +++ b/ZeroSpace/ZeroSpace.Web/Pages/Galaxy.razor @@ -311,7 +311,7 @@ else {