📂 Sidebar

<sidebar> is a fixed panel that overlays the left or right edge of the app. It is independent of <nav> and does not reposition based on layout. Use it for drawers, menus, and secondary panels that slide in from the side.

---

📋 Basic structure

Place <sidebar> as a direct child of <app>, at the same level as your pages.

<app>
  <sidebar id="mainSidebar">
    <tab page="home">Home</tab>
    <tab page="settings">Settings</tab>
    <tab action="logout">Log out</tab>
  </sidebar>

  <page name="home">...</page>
  <page name="settings">...</page>
</app>

<sidebar> must be a direct child of <app>. It does not reposition at different layouts. Position it once using the position attribute.

---

📍 Position

Attribute	Value	Result
position	"left" or absent	Fixed to the left edge
position	"right"	Fixed to the right edge

<!-- Left sidebar (default) -->
<sidebar>...</sidebar>

<!-- Right sidebar -->
<sidebar position="right">...</sidebar>

---

🔗 Navigation items

Use <tab> elements inside <sidebar>. Tabs with a page attribute navigate to that page when clicked. Tabs with an action attribute fire an action.

<sidebar id="appDrawer">
  <tab page="home">Home</tab>
  <tab page="profile">My Profile</tab>
  <tab page="settings">Settings</tab>
  <tab action="openHelp">Help</tab>
</sidebar>

---

🎨 Styling sidebar

<sidebar> is positioned fixed by default, spanning the full height of the screen. Set a width and background to make it visible.

sidebar {
  width: 280px;
  background: #fff;
  border-right: 1px solid #e0e0e0;
  padding: 20px 0;
}

sidebar tab {
  padding: 12px 20px;
  font-size: 16px;
  cursor: pointer;
}

sidebar tab:hover {
  background: #f5f5f5;
}

For a right-positioned sidebar:

sidebar[position="right"] {
  border-right: none;
  border-left: 1px solid #e0e0e0;
}

---

↕️ Collapsed state

Like <nav>, <sidebar> supports a collapsed state. Use [collapsed] in CSS to control the collapsed appearance.

sidebar {
  width: 280px;
  transition: width 0.2s ease;
}

sidebar[collapsed] {
  width: 0;
  overflow: hidden;
}

Toggle the collapsed state using the same API methods used for nav:

app.expand("#appDrawer");    // removes [collapsed]
app.collapse("#appDrawer");  // adds [collapsed]
app.toggle("#appDrawer");    // flips between the two

A common pattern is to start the sidebar collapsed and open it on a button press:

<page name="home" id="home">
  <button action="openSidebar">Menu</button>
  ...
</page>

function openSidebar() {
  app.expand("#appDrawer");
}

---

🔁 Using sidebar with layout

<sidebar> does not reposition automatically. Use app[media~="..."] or app[layout="..."] in CSS to control its visibility or size at different breakpoints.

/* Hidden on mobile, visible on tablet and up */
app[layout="mobile"] sidebar {
  display: none;
}

/* On desktop, always show it expanded */
app[layout="desktop"] sidebar {
  width: 260px;
}

---

Next

01 Styling in Clera