# 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.