dohertj2/jdescopingtool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
0820a9b024fcfb66a4e2a6d4e1f0787e7ea03a46
jdescopingtool/docs/plans/2026-01-02-top-navbar-design.md
T
Joseph Doherty 26ff8d9b4f Initial commit: JDE Scoping Tool migration project 
Set up repository with legacy .NET Framework 4.8 source (OLD/),
new .NET 10 Blazor solution (NEW/), OpenSpec specifications,
documentation, and project configuration.
2026-01-02 07:43:29 -05:00

3.6 KiB
Raw Blame History

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.

Reference in New Issue View Git Blame Copy Permalink