lonc/src/components/app-shell.js

import { navBar } from './nav-bar.js';

export function appShell(appName) {
  return `
    <div class="app-shell d-flex flex-column min-vh-100">
      <div id="app-nav">
        ${navBar(appName)}
      </div>
      <main id="route-view" class="flex-grow-1"></main>
      <div class="toast-stack" x-data="alertsData()">
        <template x-for="alert in alerts" :key="alert.id">
          <div class="toast show align-items-center border-0 mb-2 text-bg-dark" role="status">
            <div class="d-flex">
              <div class="toast-body">
                <span class="badge me-2 text-uppercase" :class="badgeClass(alert.type)" x-text="alert.type"></span>
                <span x-text="alert.message"></span>
              </div>
              <button
                type="button"
                class="btn-close btn-close-white me-2 m-auto"
                @click="dismiss(alert.id)"
                aria-label="Close"
              ></button>
            </div>
          </div>
        </template>
      </div>
    </div>
  `;
}