wrap = ({
  title,
  menu,
  brand,
  alerts,
  currentUrl,
  body,
  headers,
  role,
  bodyClass,
  req,
}) =>
  wrapIt(
    headers,
    title,
    `id="page-top" class="${bodyClass || ""}"`,
    `<div id="wrapper">
      ${menu && menu.length > 0 ? sidebar(brand, menu, currentUrl) : ""}

      <div id="content-wrapper" class="d-flex flex-column">
        <div id="content">
          <div id="page-inner-content" class="container-fluid px-2 sbadmin2-theme">
            <div id="alerts-area">${/* deprecated */ ""}</div>
            <div>
              ${renderBody(title, body, role, req)}
            <div>
          </div>
        </div>
      </div>
      <div 
        id="toasts-area"
        class="toast-container position-fixed ${
          isNode() ? "top-0 end-0 p-2" : "bottom-0 start-50 p-0"
        } end-0 p-2"
        style: "z-index: 9999; ${!isNode() ? "margin-bottom: 1.0rem" : ""}"
        aria-live="polite"
        aria-atomic="true"
      >
        ${alerts.map((a) => toast(a.type, a.msg)).join("")}
      </div>
    </div>`
  )
@param {object} opts
@param {string} opts.title
@param {menu} opts.menu
@param {object} opts.brand
@param {object[]} opts.alerts
@param {string} opts.currentUrl
@param {string|object} opts.body
@param {*} opts.headers
@param {*} opts.role
@returns {string}