Layout Anatomy
High-level structure of the tenant layout
Header
Logo + Nav LinksUtility Controls
Content Area
Main Panel
Page Title Area
Page Content
Component Names
Official names for every layout element — use these in code, comments, and conversation
| Official Name | File | Description |
|---|
| Header | layout/header.tsx | Lorem ipsum dolor sit amet, consectetur adipiscing elit |
| Content Area | layout/content-area.tsx | Sed ut perspiciatis unde omnis iste natus error sit voluptatem |
| Context Sidebar | layout/context-sidebar.tsx | Nemo enim ipsam voluptatem quia voluptas sit aspernatur |
| Main Panel | layout/main-content.tsx | Ut enim ad minima veniam, quis nostrum exercitationem |
| Page Title Area | layout/page-title-area.tsx | Quis autem vel eum iure reprehenderit qui in ea voluptate |
| Floating Footer | layout/floating-footer.tsx | Duis aute irure dolor in reprehenderit in voluptate velit |
| Focus Overlay | overlay/FocusOverlay.tsx | At vero eos et accusamus et iusto odio dignissimos ducimus |
| Focus Overlay Content | overlay/FocusOverlayContent.tsx | Nam libero tempore, cum soluta nobis est eligendi optio |
| Logo | logo.tsx | Temporibus autem quibusdam et aut officiis |
| Theme Toggle | theme-toggle.tsx | Itaque earum rerum hic tenetur sapiente |
Context Providers & Hooks
Available context hooks and the values they expose
| Hook | Provider | Key Values |
|---|
| useHeader() | Header Provider | isExpanded, toggleExpanded |
| useContextSidebar() | Context Sidebar Provider | isCollapsed, toggleCollapsed, isMobileOpen, toggleMobile |
| usePageTitle() | Page Title Provider | title, description, actions, setPageTitle() |
| useFocusOverlay() | Focus Overlay Provider | isOpen, toggleFocusOverlay, openFocusOverlay, closeFocusOverlay |
Terminology
Use these terms consistently across the codebase
| Correct Term | Do NOT Use |
|---|
| Context Sidebar | sidebar, nav panel, side nav |
| Main Panel | main content, content panel |
| Focus Overlay | overlay, modal, popup, command panel |
| Floating Footer | bottom bar, toolbar, dock |
| Page Title Area | page header, title bar |
| Content Area | content wrapper, main area |
| Header | top bar, nav bar, menu bar |
| tenant | organisation (in code paths) |
Container Width Convention
All horizontal containers that span the viewport use the same width constraint
max-w-7xl px-6 mx-auto
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.