1cbc1dab40
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
76 lines
2.8 KiB
TypeScript
76 lines
2.8 KiB
TypeScript
import { useState } from 'react'
|
|
import Sidebar from './components/Sidebar'
|
|
import TopBar from './components/TopBar'
|
|
import StatusCards from './components/StatusCards'
|
|
import MiddleRow from './components/MiddleRow'
|
|
import BottomRow from './components/BottomRow'
|
|
|
|
function App() {
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
|
const sidebarWidth = sidebarCollapsed ? 64 : 200
|
|
|
|
return (
|
|
<div className="min-h-screen w-screen overflow-hidden bg-page">
|
|
<Sidebar
|
|
collapsed={sidebarCollapsed}
|
|
onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
|
|
/>
|
|
|
|
<main
|
|
className="h-screen overflow-hidden"
|
|
style={{ marginLeft: `${sidebarWidth}px`, width: `calc(100vw - ${sidebarWidth}px)` }}
|
|
>
|
|
<TopBar />
|
|
|
|
<section
|
|
className="flex w-full flex-col overflow-hidden"
|
|
style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: '16px 24px 24px 24px', gap: '20px' }}
|
|
>
|
|
{/* Hero + KPI overlap — KPI bottom aligns with banner bottom */}
|
|
<div className="relative w-full shrink-0 overflow-hidden" style={{ height: '240px' }}>
|
|
<img
|
|
src="/archnest-hero-banner.png"
|
|
alt="ArchNest Banner"
|
|
className="absolute inset-0 h-full w-full"
|
|
style={{
|
|
objectFit: 'cover',
|
|
objectPosition: 'center 35%',
|
|
maskImage: 'linear-gradient(to bottom, black 0%, black 45%, transparent 95%)',
|
|
WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 45%, transparent 95%)',
|
|
}}
|
|
onError={(e) => {
|
|
const target = e.currentTarget
|
|
target.style.display = 'none'
|
|
target.parentElement!.classList.add('bg-card')
|
|
}}
|
|
/>
|
|
{/* Side vignette so the rectangular image blends into the page edges */}
|
|
<div
|
|
className="pointer-events-none absolute inset-0"
|
|
style={{
|
|
background:
|
|
'radial-gradient(ellipse 75% 100% at center, transparent 55%, var(--color-page) 100%)',
|
|
}}
|
|
/>
|
|
{/* KPI cards positioned so their bottom edge aligns with banner bottom */}
|
|
<div className="absolute bottom-0 left-0 right-0 z-10 px-4">
|
|
<StatusCards />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Middle Row — stretches to fill available vertical space */}
|
|
<div className="min-h-0 flex-1">
|
|
<MiddleRow />
|
|
</div>
|
|
|
|
{/* Bottom Row — anchored to the bottom */}
|
|
<div className="shrink-0">
|
|
<BottomRow />
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|