The frame of an app's pages: a Sidebar, a Top Bar and the page. Specification: docs/components/app-shell.md
A .canon-app-shell around a Sidebar, a Top Bar and the page's <main>. The sidebar takes the full height at the start; the bar sits over the content; both stay put while the page scrolls (scroll inside the frame). The sidebar's toggle is at the bar's start, in the same place whether the sidebar is open or a rail.
The same shell with the sidebar a rail (data-display="icon"), as on a calendar that needs the width. The same toggle opens it again.
Under a width the theme sets (Canon: 640px of the shell's own width), the sidebar leaves the page: the same toggle opens it over the page, open whatever it was, and Escape, a click outside or choosing a page closes it. Drag the frame's corner wider and it comes back in place, a rail again if it was one. The bar folds as it narrows (see Top Bar).
Right to left, the sidebar is on the right and the bar's start with it.