Drop the /network route, page, and sidebar entry. Network will instead
become a tab alongside Overview on the Infrastructure page later, so add
a disabled placeholder tab for now.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Wires up react-router-dom so the sidebar nav actually navigates between
pages, with route-aware active highlighting and dynamic page titles.
Extracts Glance content into its own page component and adds a new
Infrastructure page matching the mockup: status cards, resource
distribution/cost breakdown donuts, infra map, top resources by
utilization, resource trend chart, recent activity, and footer stats.
Previously sat as an inline button below the nav items, disconnected
from the rest of the layout. Now it's a small circle straddling the
sidebar/content boundary, vertically centered on the viewport - the
common pattern for collapsible side panels.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Sidebar: prominent gold arc logo using a cleaned transparent-background
asset (keys out the source PNG's baked-in brown texture), horizontal
icon+label nav items with larger spacing, and a filled gold-tinted
highlight box on the selected item.
Layout: main content is now a flex column filling the viewport - hero
fixed at top, middle row (Resource Overview / Recent Activity / Top
Alerts) stretches to fill available height with items distributed, and
the bottom row (Network Traffic / Shortcuts) anchored to the bottom.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
Sidebar expanded width 140px -> 200px and collapsed 60px -> 64px to
match mockup proportions. Hero banner now uses a fixed shorter height
with object-fit cover, a bottom mask fade, and a radial vignette so
its edges blend into the page background instead of sitting in a
bordered box. KPI cards are now semi-transparent so the hero image
bleeds through behind them.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BbJV5nm8KPVH1oNJYKpnoF
