AppTopBar
AppTop bar wrapper passed into AppShell's header slot. The logo slot anchors the left side while children (GlobalSearch, UserMenu, Button, etc.) are arranged in a flex row.
Search everything…
<%- include('modules/app/AppTopBar', {
children: `
<%- include('modules/app/GlobalSearch', { placeholder: 'Search everything…' }) %>
<button class="p-1.5 rounded-md text-text-secondary hover:bg-surface-overlay">
<i class="fa-solid fa-bell" aria-hidden="true"></i>
</button>
<%- include('modules/domain/common/user/UserMenu', { name: user.name, role: user.role }) %>
`
}) %>
Acme Dashboard
JD
<%- include('modules/app/AppTopBar', {
logoContent: '<span class="text-sm font-bold text-primary">Acme Dashboard</span>',
children: `
<div class="flex-1"></div>
<%- include('modules/ui/Button', { children: 'New', iconLeft: '<i class="fa-solid fa-plus"></i>' }) %>
<%- include('modules/domain/common/user/UserMenu', { name: user.name }) %>
`
}) %><div class="flex items-center gap-3 flex-1<%= locals.className ? ' '+locals.className : '' %>">
<% if (locals.logoContent) { %>
<div class="shrink-0"><%- locals.logoContent %></div>
<% } %>
<%- locals.children || '' %>
</div>