Naming what you see

In short

Your app's screen is made of named regions (the nav rail, the sidebar, the page header, the main area and the aside panel), and naming the one you mean turns a vague request into a precise one.

The apps Sapilon builds share one screen layout, and every part of it has a name. Learning the handful of names below is the cheapest way to make your requests land: “move the filters” is a guess, “move the filters into the Sidebar” is an instruction.

The map

┌─ the whole screen ──────────────────────────────────────────────────┐
│ HeaderBar          a thin bar across the top (not every app has one)│
├──────────┬──────────────┬───────────────────────────────┬───────────┤
│          │              │ ┌─ Page ────────────────────┐ │           │
│   Nav    │   Sidebar    │ │ PageHeader                │ │   Aside   │
│          │              │ │  title, breadcrumbs and   │ │           │
│ the icon │ the list or  │ │  the page's buttons       │ │  a panel  │
│ strip of │ tree for the │ ├─ Main ────────────────────┤ │  that     │
│ your     │ section you  │ │                           │ │  slides   │
│ sections │ are in       │ │   the page itself         │ │  in from  │
│          │              │ │                           │ │  the right│
│          │              │ └───────────────────────────┘ │           │
└──────────┴──────────────┴───────────────────────────────┴───────────┘

Your project has this same map as a live diagram: open Explorer → your app → Styles → Layout and hover a region to see its name and what belongs in it, in both desktop and mobile arrangements.

On a phone the same regions rearrange rather than disappear: the Nav becomes a bar along the bottom, the Sidebar hides behind the menu button, and the Aside opens as a sheet from the bottom of the screen.

The Sidebar has two ways of showing up there, and you can pick either — app-wide on Explorer → your app → Styles → Theme, or for one page by asking:

as a drawer (the default) — it slides over the page, and tapping the page behind it puts it away.
full screen — it takes the whole screen, the way a list does on a phone: you pick an item to go to it, and Back brings the list back. Worth choosing when the Sidebar is a list or a tree you pick from, and the page beside it is too narrow to share. Leave it as a drawer when the Sidebar holds filters — there is nothing to pick, so a full screen has no natural way onward.

“On a phone, the Sidebar should open full screen instead of as a drawer.” “Make the Sidebar on the Topics page full screen on phones.”

What each one is for

Name	What it is	What belongs in it
Nav	The strip of icons for the main sections of the app	Top-level destinations only: Orders, Customers, Reports
Sidebar	The column beside the nav, showing what is in the current section	A list, a tree, a set of filters: things you pick from. Present alongside the Nav Ribbon; the wider Nav Sidebar takes its place
PageHeader	The title row at the top of the page	The page title, the trail of links above it, and the page’s main buttons
Main	The body of the page	The actual content: the table, the form, the dashboard
Aside	The panel that opens on the right	Detail about one selected thing: an order, a customer, a record you are editing
HeaderBar	An optional bar across the very top	Things that belong to the whole app, not to one page

Using the names when you ask

Naming a region removes the biggest ambiguity in a UI request: where.

“Put the customer’s contact details in the Aside when a row is selected, instead of opening a new page.”
“The Sidebar should list the open invoices; keep the invoice itself in Main.”
“Move the Export button into the PageHeader, next to Save.”
“Add a Reports item to the Nav.”

You do not have to use them. But when you do, the agent does not have to guess, and the change usually lands in one turn, the same reason Your first Ask recommends naming the outcome, the reason and the boundary.

Finding a region in the browser

If you are comfortable with browser developer tools, every region is labelled in the page itself. Right-click a part of the screen, choose Inspect, and look for a data-component attribute:

<aside data-component="Aside" aria-label="Detail panel">

Regions inside a component carry data-part, so [data-component="PageHeader"] [data-part="actions"] is exactly the row of buttons in the page header. It is the same vocabulary as the table above, which means a screenshot, a bug report and a request to the agent can all use one set of words.