mjasin/Nexus.Reader
1
0
Fork 0
Code Issues 9 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(ui): implement premium mobile-first reader layout with three-tab bottom navigation and assistant FAB

Browse Source
This commit is contained in:
Marek Jaisński
2026-05-27 09:36:02 +02:00
parent a9a670d776
commit e42546d82f
9 changed files with 947 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/NexusReader.UI.Shared/Layout/MainHubLayout.razor
+42 -8
View File
@@ -4,9 +4,31 @@
@using NexusReader.Application.Abstractions.Services
@using NexusReader.UI.Shared.Services
<div class="hub-container">
<div class="hub-container @(_isMobileMenuOpen ? "mobile-menu-open" : "")">
<AuthorizeView>
<Authorized>
<!-- Mobile Sticky Top-bar -->
<div class="nexus-mobile-topbar">
<button class="hamburger-btn" @onclick="ToggleMobileMenu" aria-label="Toggle Menu">
<NexusIcon Name="menu" Size="24" />
</button>
<div class="mobile-logo">
<NexusIcon Name="diamond" Size="20" Class="logo-icon pulsing-logo" />
<span class="logo-text">Nexus</span>
</div>
<div class="mobile-user-pill">
<div class="user-avatar-mini">
@context.User.Identity?.Name?[0].ToString().ToUpper()
</div>
</div>
</div>
<!-- Mobile Backdrop overlay -->
@if (_isMobileMenuOpen)
{
<div class="mobile-sidebar-backdrop" @onclick="CloseMobileMenu"></div>
}
<aside class="hub-sidebar">
<div class="sidebar-header">
<div class="logo">
@@ -16,43 +38,43 @@
</div>
<nav class="sidebar-nav">
<NavLink class="nav-item" href="/" Match="NavLinkMatch.All">
<NavLink class="nav-item" href="/" Match="NavLinkMatch.All" @onclick="CloseMobileMenu">
<div class="nav-icon">
<NexusIcon Name="home" Size="18" />
</div>
<span class="nav-text">Dashboard</span>
</NavLink>
<NavLink class="nav-item" href="/library">
<NavLink class="nav-item" href="/library" @onclick="CloseMobileMenu">
<div class="nav-icon">
<NexusIcon Name="book-open" Size="18" />
</div>
<span class="nav-text">Library</span>
</NavLink>
<NavLink class="nav-item" href="/concepts-map">
<NavLink class="nav-item" href="/concepts-map" @onclick="CloseMobileMenu">
<div class="nav-icon">
<NexusIcon Name="map" Size="18" />
</div>
<span class="nav-text">Concepts Map</span>
</NavLink>
<NavLink class="nav-item" href="/intelligence">
<NavLink class="nav-item" href="/intelligence" @onclick="CloseMobileMenu">
<div class="nav-icon">
<NexusIcon Name="cpu" Size="18" />
</div>
<span class="nav-text">Global AI Q&A</span>
</NavLink>
<NavLink class="nav-item" href="/profile">
<NavLink class="nav-item" href="/profile" @onclick="CloseMobileMenu">
<div class="nav-icon">
<NexusIcon Name="message-square" Size="18" />
</div>
<span class="nav-text">Profile</span>
</NavLink>
<NavLink class="nav-item" href="/settings">
<NavLink class="nav-item" href="/settings" @onclick="CloseMobileMenu">
<div class="nav-icon">
<NexusIcon Name="settings" Size="18" />
</div>
<span class="nav-text">Settings</span>
</NavLink>
<NavLink class="nav-item" href="/concenters">
<NavLink class="nav-item" href="/concenters" @onclick="CloseMobileMenu">
<div class="nav-icon">
<NexusIcon Name="target" Size="18" />
</div>
@@ -90,6 +112,7 @@
[Inject] private NavigationManager NavigationManager { get; set; } = default!;
private bool _isSyncing = false;
private bool _isMobileMenuOpen = false;
protected override async Task OnInitializedAsync()
{
@@ -104,8 +127,19 @@
}
}
private void ToggleMobileMenu()
{
_isMobileMenuOpen = !_isMobileMenuOpen;
}
private void CloseMobileMenu()
{
_isMobileMenuOpen = false;
}
private async Task HandleLogout()
{
CloseMobileMenu();
await IdentityService.LogoutAsync();
NavigationManager.NavigateTo("/account/logout-form", true);
}