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

[UX/Routing] Implement Hub Navigation & Reader Toolbar Profile Link #26

New Issue
Closed
opened 2026-05-09 09:37:57 +00:00 by mjasin · 1 comment
mjasin commented 2026-05-09 09:37:57 +00:00
Owner
Copy Link
Copy Source

Context: The application needs a way to navigate between the immersive Reader View and the global Profile/Dashboard without cluttering the reading canvas.
Role: UX & Routing Specialist.
Task: Refactor the navigation flow between the Reader and the Global Hub.
Requirements:

  1. Reader Toolbar Update: In the existing vertical IntelligenceToolbar (inside the reader), add a new "Profile/Home" icon at the bottom.
  2. Routing Logic: Clicking the Profile icon should route the user away from the immersive reader and into the /profile route.
  3. Global Layout: Create a new MainHubLayout.razor (distinct from ReaderLayout). This layout will contain the full left-hand navigation sidebar (Dashboard, Library, Profile, Settings) as seen in the wireframe.
    Constraint: Do NOT add the full navigation sidebar to the Reader view. The Reader must remain distraction-free.
**Context:** The application needs a way to navigate between the immersive Reader View and the global Profile/Dashboard without cluttering the reading canvas. **Role:** UX & Routing Specialist. **Task:** Refactor the navigation flow between the Reader and the Global Hub. **Requirements:** 1. **Reader Toolbar Update:** In the existing vertical `IntelligenceToolbar` (inside the reader), add a new "Profile/Home" icon at the bottom. 2. **Routing Logic:** Clicking the Profile icon should route the user away from the immersive reader and into the `/profile` route. 3. **Global Layout:** Create a new `MainHubLayout.razor` (distinct from `ReaderLayout`). This layout will contain the full left-hand navigation sidebar (Dashboard, Library, Profile, Settings) as seen in the wireframe. **Constraint:** Do NOT add the full navigation sidebar to the Reader view. The Reader must remain distraction-free.
mjasin commented 2026-05-09 18:27:48 +00:00
Author
Owner
Copy Link
Copy Source

Dashboard fix:

Role: Senior Frontend UI/UX Architect

Context

We are building "Nexus E-Reader", a professional knowledge workstation. You have implemented the basic shell of the Profile / Dashboard hub (as seen in the provided screenshot with purple circles and default blue links). Your task is to refactor this implementation to match the intended high-fidelity design mockup.

Objective

Overhaul the MainHubLayout.razor (the left sidebar) and the core visual foundation of the dashboard to match the "Nexus Station" aesthetic. Eliminate default browser styling (blue links, unstyled lists) and introduce the correct typography, iconography, and neon accents.

Design System Constraints

  • Primary Background: #121212 (Deep Dark) or #0D0D0D.
  • Panel Background: rgba(255, 255, 255, 0.03) with backdrop-filter: blur(10px) (Glassmorphism).
  • Primary Accent (Neon): #00ff99 (Use CSS variable: var(--nexus-neon)).
  • Text Primary: #FFFFFF or #E0E0E0.
  • Text Secondary: #888888.
  • Font Families:
    • Brand/Headings: Merriweather, serif.
    • UI/Data: Inter, Segoe UI, sans-serif.

Refactoring Tasks

1. Left Sidebar (Navigation Panel) Overhaul

Currently, the sidebar looks like an unstyled HTML list. Refactor it to match the mockup:

  • Width & Layout: Set a fixed width (e.g., 260px). Use a slightly lighter background than the main content area (e.g., #161616) and a right border (1px solid rgba(255,255,255,0.05)).
  • Brand Logo: Replace the simple "Nexus" text with a stylized header. Use the Merriweather font and add a subtle glowing icon (e.g., a diamond or star SVG) next to it.
  • Navigation Links:
    • Remove the default blue color and purple circle markers.
    • Links must be standard text color (#A0A0A0) and use the Inter font.
    • Implement an SVG icon system for the menu items (Dashboard, Library, Profile, Settings).
    • Add padding and alignment to create a neat, vertical list.
  • Active State (.active):
    • The currently active route (e.g., "Profile") should have white text (#FFFFFF).
    • Add a vertical neon indicator line on the far left of the active item: border-left: 3px solid var(--nexus-neon).

2. User/Admin Section (Bottom of Sidebar)

  • Enhance the bottom user widget (admin@nexus.com).
  • Wrap it in a discrete container with a top border.
  • Style the avatar (currently an "A" in a blue square) to be circular with a dark background and subtle border.
  • Ensure the "Logout/Exit" icon on the right is vertically centered and uses a muted gray color, turning white on hover.

3. Main Content Area & Loading State

  • The central loading spinner is currently the only element. Ensure the main content area has a background of #121212 or a very subtle radial gradient (radial-gradient(circle at center, #1a1a1a 0%, #121212 100%)).
  • Ensure the main content area fills the remaining viewport width (flex: 1 or CSS Grid).

Definition of Done (DoD)

  • The left navigation sidebar looks identical to the provided conceptual mockup: clean typography, correct SVG icons, no default browser link styles, and a clear active state with a neon left-border.
  • The layout is stable and responsive (the sidebar stays fixed while the main content area can scroll).
Dashboard fix: # Role: Senior Frontend UI/UX Architect ## Context We are building "Nexus E-Reader", a professional knowledge workstation. You have implemented the basic shell of the `Profile` / `Dashboard` hub (as seen in the provided screenshot with purple circles and default blue links). Your task is to refactor this implementation to match the intended high-fidelity design mockup. ## Objective Overhaul the `MainHubLayout.razor` (the left sidebar) and the core visual foundation of the dashboard to match the "Nexus Station" aesthetic. Eliminate default browser styling (blue links, unstyled lists) and introduce the correct typography, iconography, and neon accents. ## Design System Constraints - **Primary Background:** `#121212` (Deep Dark) or `#0D0D0D`. - **Panel Background:** `rgba(255, 255, 255, 0.03)` with `backdrop-filter: blur(10px)` (Glassmorphism). - **Primary Accent (Neon):** `#00ff99` (Use CSS variable: `var(--nexus-neon)`). - **Text Primary:** `#FFFFFF` or `#E0E0E0`. - **Text Secondary:** `#888888`. - **Font Families:** - Brand/Headings: `Merriweather`, serif. - UI/Data: `Inter`, `Segoe UI`, sans-serif. ## Refactoring Tasks ### 1. Left Sidebar (Navigation Panel) Overhaul Currently, the sidebar looks like an unstyled HTML list. Refactor it to match the mockup: - **Width & Layout:** Set a fixed width (e.g., `260px`). Use a slightly lighter background than the main content area (e.g., `#161616`) and a right border (`1px solid rgba(255,255,255,0.05)`). - **Brand Logo:** Replace the simple "Nexus" text with a stylized header. Use the `Merriweather` font and add a subtle glowing icon (e.g., a diamond or star SVG) next to it. - **Navigation Links:** - Remove the default blue color and purple circle markers. - Links must be standard text color (`#A0A0A0`) and use the `Inter` font. - Implement an SVG icon system for the menu items (Dashboard, Library, Profile, Settings). - Add padding and alignment to create a neat, vertical list. - **Active State (`.active`):** - The currently active route (e.g., "Profile") should have white text (`#FFFFFF`). - Add a vertical neon indicator line on the far left of the active item: `border-left: 3px solid var(--nexus-neon)`. ### 2. User/Admin Section (Bottom of Sidebar) - Enhance the bottom user widget (`admin@nexus.com`). - Wrap it in a discrete container with a top border. - Style the avatar (currently an "A" in a blue square) to be circular with a dark background and subtle border. - Ensure the "Logout/Exit" icon on the right is vertically centered and uses a muted gray color, turning white on hover. ### 3. Main Content Area & Loading State - The central loading spinner is currently the only element. Ensure the main content area has a background of `#121212` or a very subtle radial gradient (`radial-gradient(circle at center, #1a1a1a 0%, #121212 100%)`). - Ensure the main content area fills the remaining viewport width (`flex: 1` or CSS Grid). ## Definition of Done (DoD) - The left navigation sidebar looks identical to the provided conceptual mockup: clean typography, correct SVG icons, no default browser link styles, and a clear active state with a neon left-border. - The layout is stable and responsive (the sidebar stays fixed while the main content area can scroll).
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
Antigravity M.Wojtaszek mjasin (Marek Jaisński)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: mjasin/Nexus.Reader#26
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?