54b7aa1e32
Moves the hero rendering to the layout level so the banner shows the full golden arch and sky behind the page title, search bar, and sub-tabs row. TopBar and the search input backgrounds are now transparent so the banner reads through cleanly.
65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import { useState } from 'react'
|
|
import { Routes, Route, useLocation } from 'react-router-dom'
|
|
import Sidebar from './components/Sidebar'
|
|
import TopBar from './components/TopBar'
|
|
import Glance from './pages/Glance'
|
|
import Infrastructure from './pages/Infrastructure'
|
|
|
|
function App() {
|
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
|
const sidebarWidth = sidebarCollapsed ? 64 : 200
|
|
const location = useLocation()
|
|
const showHero = location.pathname === '/infrastructure'
|
|
|
|
return (
|
|
<div className="min-h-screen w-screen overflow-hidden bg-page">
|
|
<Sidebar
|
|
collapsed={sidebarCollapsed}
|
|
onToggle={() => setSidebarCollapsed(!sidebarCollapsed)}
|
|
/>
|
|
|
|
<main
|
|
className="relative h-screen overflow-hidden"
|
|
style={{ marginLeft: `${sidebarWidth}px`, width: `calc(100vw - ${sidebarWidth}px)` }}
|
|
>
|
|
{showHero && (
|
|
<div className="pointer-events-none absolute left-0 right-0 top-0" style={{ height: '300px', zIndex: 0 }}>
|
|
<img
|
|
src="/archnest-hero-banner.png"
|
|
alt=""
|
|
className="absolute inset-0 h-full w-full"
|
|
style={{
|
|
objectFit: 'cover',
|
|
objectPosition: 'center 5%',
|
|
maskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
|
|
WebkitMaskImage: 'linear-gradient(to bottom, black 0%, black 55%, transparent 100%)',
|
|
}}
|
|
/>
|
|
<div
|
|
className="absolute inset-0"
|
|
style={{
|
|
background: 'radial-gradient(ellipse 70% 100% at center, transparent 40%, var(--color-page) 100%)',
|
|
}}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<div className="relative" style={{ zIndex: 1 }}>
|
|
<TopBar />
|
|
</div>
|
|
|
|
<section
|
|
className="relative flex w-full flex-col overflow-hidden"
|
|
style={{ height: 'calc(100vh - 56px)', scrollbarWidth: 'none', padding: '16px 24px 24px 24px', gap: '20px', zIndex: 1 }}
|
|
>
|
|
<Routes>
|
|
<Route path="/" element={<Glance />} />
|
|
<Route path="/infrastructure" element={<Infrastructure />} />
|
|
</Routes>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|