bandolier-website/admin/pages/EmailConfig.svelte

<script>
  import Sidebar from "$/client/components/Sidebar.svelte";
  import { link } from "svelte-spa-router";
  import Layout from '$/admin/Layout.svelte';
  import Icon from "$/client/components/Icon.svelte";
  import EmailDNS from "./EmailDNS.svelte";
  import EmailSend from "./EmailSend.svelte";

  export let params = {};

  let panels = [
    {title: "Send Test", active: false, icon: "send", component: EmailSend },
    {title: "DNS Test", active: false, icon: "cast", component: EmailDNS },
  ]

  const select_named = () => {
    if(params.name) {
      return panels.find(p => p.title === params.name) || panels[0];
    } else {
      return panels[0];
    }
  }

  let selected = select_named();
  selected.active = true;

  const sidebar_select = (event) => {
    const {index, item} = event.detail;

    selected = item;

    panels = panels.map((x, i) => {
      x.active = i == index;
      return x;
    });
  }

</script>

<style>
  div[slot="top"] span {
    display: none;
  }

  contents {
    padding: 0.5rem;
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
  }

  left {
    display: flex;
    height: 100vh;
    max-height: 100vh;
    min-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: min-content;
    width: min-content;
    min-width: min-content;
    background-color: var(--color-bg-secondary);
  }
</style>

<Layout fullscreen={ true } header={ true } footer={false } authenticated={ true } testid="page-email-config">
  <left>
    <Sidebar on:select={ sidebar_select } menu={ panels }>
      <div slot="top">
        <h3><a href="/" use:link><Icon name="home" /> Email Admin</h3>
        <span><Icon name="home" size="36" /></span>
      </div>

      <div slot="bottom">
        <p>Be careful where you send email.</p>
      </div>
    </Sidebar>
  </left>

  <contents>
    <h1>{selected.title}</h1>
    <svelte:component this={selected.component} />
  </contents>
</Layout>