Sidebar

The glass panel on the left and the right of each app. One shell, the same type, the same rows.

Anatomy

<Sidebar side="start" label="Apps">
  <template #header>
    <SidebarHeader>
      <SidebarTitle>Apps</SidebarTitle>
      <SidebarTools>
        <SidebarSearch v-model="query" />
        <SidebarIcon label="Add" />
      </SidebarTools>
    </SidebarHeader>
  </template>
  <SidebarBody>
    <SidebarSection title="Records">
      <ul>
        <li>
          <SidebarItem to="/records">Records</SidebarItem>
        </li>
      </ul>
    </SidebarSection>
  </SidebarBody>
</Sidebar>

Parts

• Sidebar — side is start (left) or end (right). Fixed, 18rem by default, translucent. Drag the inner edge to resize it (12rem to 36rem); the width is remembered per side. Stops pointer and wheel so a canvas does not pan through it. contained positions it inside a relative frame and does not remember the width. compact shortens a start panel under 865px.
• Header / Title / Tools / Icon — the 1rem title and the icon buttons. Icon size="sm" is the add button on a section.
• Search — the filter row. Opens under the header, focuses the field, and clears on Escape.
• Body — the scroll region. density is list or inspector.
• Section — an uppercase label. Hovering the section shows a chevron beside the name. The chevron collapses the rows, and the rows ease open or closed. A longer list takes a little longer. A plus sits on the right only when the section can add something: listen for add, or pass the action slot. At rest the plus is only the icon. Hovering it fills it and darkens the icon. The label is “New” followed by the section name.
• Item — a row. Hover and current go dark on a lighter fill. to makes it a link. layout="row" is for a row with an icon or mark beside the name.
• Menu — the bordered dropdown. align is end or start.
• Anchor — the relative box a menu hangs from.

No drop-shadow. The translucent fill sits on the page.