App Layout
The shell of a signed-in app: a sidebar menu that folds into a rail of icons, a top bar, the page and a footer. Below 1024px the menu hides behind a button and slides in over the 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 (contain: layout keeps the mobile menu and the backdrop inside it); in an app the layout fills the window.
Basic
The sidebar is pinned open; items run commands and mark the current page with active, show badges and lock disabled items. The top bar end goes into txAppTopbar, the footer into txAppFooter. The pin button in the sidebar header lets it fold into a rail.
Dashboard
Everything at a glance
Nested
Items with items open and close like an accordion; the parents of the current item open on their own and the other branches close. Badges, links to other sites and locked items work at any depth. On the rail the nested items keep only their icons.
Transfers
Opened from a nested section
Rail
With [anchored]="false" the sidebar is a rail of icons; badges and locks sit on the icons. It opens over the page while the pointer or the keyboard focus is on it, and its pin button keeps it open. stateKey remembers the choice between visits.
Dashboard
Everything at a glance
Plain
[sidebar]="false" drops the sidebar and the menu button and puts the logo and the title into the top bar — for pages before the user has a workspace to work in.
ReportsDashboard
Everything at a glance
Backdrop
backdrop draws a soft gradient with a fine grain behind the page: spectrum mixes the primary colour with purple and cyan, accent stays in the shades of the primary colour.
Dashboard
Everything at a glance
Responsive
Below 1024px the menu hides behind the button at the start of the top bar and slides in over a mask; a pick, the mask or Escape closes it. Pick a device to see each width — responsive="container" measures the layout itself.
Dashboard
Everything at a glance
Design tokens
dt changes the tokens of one layout: here a wider sidebar on the ground colour, a narrower rail and tighter page spacing.
Dashboard
Everything at a glance