Console Layout
The frame of an "app inside an app" console: a sticky header with the brand and the crumbs, an icon rail of sections, the page and a footer. tx-console-panel adds a sticky list or tree on the left of a page.
A block from @tectra-ng/blocks — it comes with tectra-ng, or alone: npm install @tectra-ng/blocks. The examples sit in a 560px screen; dt tells the layout that height, in an app it fills the window.
Basic
The brand, the crumbs, the rail and the footer around a page. The rail sections here run commands; the app switcher and the header actions go into txConsoleApps and txConsoleActions.
Search consoleWebsiteOverviewOverview
How your sites did this week
Router
In an app the rail sections are router links. activeOptions decides when a section is current — TX_CONSOLE_RAIL_SECTION_MATCH keeps it active on its child pages, TX_CONSOLE_RAIL_EXACT_MATCH suits the home section. The crumbs come from the crumb value in the data of the active routes; this example keeps its sections in the query of the docs page and passes the crumbs itself.
Edge
Pick a section in the rail
Panel
tx-console-panel puts a sticky list or tree on the left of a page — mark it txConsolePanelAside. The panel gives the list its spacing, so the menu here drops its own outer spacing with dt; its items run commands and mark the current project with active. The panel takes the whole content area and moves the layout footer under its page; below 1024px it folds into a bar above the page.
Search consoleProjectsWebsiteWebsite
Pages found this week
| website.example.com/ | 169 |
| website.example.com/pricing | 289 |
| website.example.com/about | 409 |
| website.example.com/contact | 529 |
Responsive
Below 1024px the panel becomes a bar above the page; below 768px the rail turns into a row under the header and only the brand stays in it. Without an app switcher the brand moves to the edge. responsive="container" measures the console itself instead of the window — here inside device frames; pick a device to see each width.
Search consoleProjectsWebsiteWebsite
Pages found this week
Design tokens
dt changes the tokens of one console: here a narrower rail, a taller header and a softer active section.
Mail InboxInbox
Nothing new since this morning