Joseph Doherty
26ff8d9b4f
Set up repository with legacy .NET Framework 4.8 source (OLD/), new .NET 10 Blazor solution (NEW/), OpenSpec specifications, documentation, and project configuration.
108 lines
3.6 KiB
Markdown
108 lines
3.6 KiB
Markdown
# Top Navbar Layout Design
|
|
|
|
**Date:** 2026-01-02
|
|
**Goal:** Adjust the NEW Client project UI to match the legacy app's top navbar layout instead of sidebar navigation.
|
|
|
|
---
|
|
|
|
## Summary
|
|
|
|
Replace the current Radzen sidebar navigation with a fixed-top Bootstrap-style navbar containing horizontal navigation links. This matches the legacy JDE Scoping Tool's look and feel as documented in `webui_lf.md`.
|
|
|
|
---
|
|
|
|
## Layout Structure
|
|
|
|
```
|
|
+------------------------------------------------------------------+
|
|
| [Navbar - Fixed Top, Dark Theme] |
|
|
| +--------------------------------------------------------------+ |
|
|
| | JDE Scoping Tool | Searches | New Search | Queue | Status | [User] [Logout] |
|
|
| +--------------------------------------------------------------+ |
|
|
+------------------------------------------------------------------+
|
|
| |
|
|
| [Main Content - Full Width Container] |
|
|
| +--------------------------------------------------------------+ |
|
|
| | | |
|
|
| | @Body | |
|
|
| | | |
|
|
| +--------------------------------------------------------------+ |
|
|
| |
|
|
| -------------------------------------------------------------- |
|
|
| [Footer: JDE Scoping Tool - Manufacturing Data Analysis] |
|
|
+------------------------------------------------------------------+
|
|
```
|
|
|
|
---
|
|
|
|
## Color Scheme
|
|
|
|
| Element | Color | CSS Value |
|
|
|---------|-------|-----------|
|
|
| Navbar background | Dark gray | `#222` |
|
|
| Brand text | White | `#fff` |
|
|
| Nav links (normal) | Light gray | `#9d9d9d` |
|
|
| Nav links (hover/active) | White | `#fff` |
|
|
| Username text | Light gray | `#9d9d9d` |
|
|
| Login button | Primary blue | `#337ab7` |
|
|
| Logout button | Light variant | - |
|
|
| Navbar height | ~56px | - |
|
|
|
|
---
|
|
|
|
## Content Area Changes
|
|
|
|
| Aspect | Current (Sidebar) | New (Top Nav) |
|
|
|--------|-------------------|---------------|
|
|
| Width | ~calc(100% - 220px) | Full width (100%) |
|
|
| Top padding | 0 | 56px (navbar height) |
|
|
| Side padding | 1rem | 15px (Bootstrap container) |
|
|
|
|
---
|
|
|
|
## Files to Modify
|
|
|
|
### 1. `MainLayout.razor`
|
|
- Remove `RadzenSidebar` and `RadzenPanelMenu`
|
|
- Add horizontal nav links using Blazor `NavLink` components
|
|
- Simplify body structure (remove horizontal stack wrapping sidebar)
|
|
- Add CSS class for fixed-top navbar behavior
|
|
|
|
### 2. `app.css`
|
|
- Change header background from `#1b6ec2` to `#222`
|
|
- Add fixed-top navbar positioning
|
|
- Add body padding-top: 56px for navbar clearance
|
|
- Add nav link styling (normal, hover, active states)
|
|
- Remove sidebar-related styles (`.rz-sidebar`, `.rz-panel-menu`)
|
|
|
|
---
|
|
|
|
## Navigation Links
|
|
|
|
Using Blazor's `NavLink` for automatic active state detection:
|
|
|
|
| Link Text | Route | Match |
|
|
|-----------|-------|-------|
|
|
| Searches | `/` | `NavLinkMatch.All` |
|
|
| New Search | `/search` | Default |
|
|
| Search Queue | `/search/queue` | Default |
|
|
| Refresh Status | `/refresh-status` | Default |
|
|
|
|
---
|
|
|
|
## Components
|
|
|
|
**Keep:**
|
|
- `RadzenLayout`, `RadzenHeader`, `RadzenBody`, `RadzenFooter`
|
|
- Dialog, Notification, ContextMenu, Tooltip services
|
|
|
|
**Remove:**
|
|
- `RadzenSidebar`
|
|
- `RadzenPanelMenu`, `RadzenPanelMenuItem`
|
|
|
|
---
|
|
|
|
## Mobile Considerations
|
|
|
|
Keep horizontal layout for now (legacy app wasn't mobile-first). The navbar will handle basic responsive behavior through Radzen's built-in styling.
|