bandolier-template/admin/pages/Home.svelte

<script>
  import { onMount } from 'svelte';
  import Sidebar from "$/client/components/Sidebar.svelte";
  import TableIndex from "$/admin/pages/TableIndex.svelte";
  import EmailDNS from "$/admin/pages/EmailDNS.svelte";
  import EmailSend from "$/admin/pages/EmailSend.svelte";
  import Stats from "$/admin/pages/Stats.svelte";
  import IconFinder from "$/admin/bando/IconFinder.svelte";
  import Djenterator from "$/admin/bando/Djenterator.svelte";
  import Layout from "$/admin/Layout.svelte";
  import { replace } from "svelte-spa-router";

  export let params={what: "tables"};

  let panels = [
    {url: "tables", title: "Tables", active: true, icon: "database", component: TableIndex},
    {url: "errors", title: "Errors", active: false, icon: "alert-circle", href: "/admin/#/errors/"},
    {url: "icons", title: "Icons", active: false, icon: "smile", component: IconFinder},
    {url: "demos", title: "Components", active: false, icon: "component", href: "/admin/#/bando/components/"},
    {url: "docs", title: "API Docs", active: false, icon: "book", href: "/admin/#/docs/"},
    {url: "routes", title: "Routes", active: false, icon: "code-2", href: "/admin/#/routes/"},
    {url: "djenterator", title: "Djenterator", active: false, icon: "layout-template", component: Djenterator},
    {url: "email-dns", title: "Email DNS", active: false, icon: "mail-check", component: EmailDNS},
    {url: "email-send", title: "Email Send", active: false, icon: "mails", component: EmailSend},
    {url: "stats", title: "Stats", active: false, icon: "activity", component: Stats},
  ];

  let selected = panels[0];

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

    selected = item;

    replace(`/${ selected.url }/`);

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

  const url_select = (url) => {
    for(let panel of panels) {
      if(url === panel.url) {
        panel.active = true;
        selected = panel;
      } else {
        panel.active = false;
      }
    }
  }

  $:if(selected && params.what && params.what != selected.url) url_select(params.what);

  onMount(() => {
    if(params.what) {
      url_select(params.what);
    }
  });

</script>

<style>
  right {
    flex-direction: column;
    padding: 0.5rem;
    min-height: calc(100vh - var(--fixed-header-height));
    max-height: calc(100vh - var(--fixed-header-height));
    height: calc(100vh - var(--fixed-header-height));
    min-width: calc(100% - 300px);
    max-width: calc(100% - 300px);
    width: calc(100% - 300px);
    overflow-y: auto;
  }

  left {
    display: flex;
    max-width: min-content;
    min-height: calc(100vh - var(--fixed-header-height));
    max-height: calc(100vh - var(--fixed-header-height));
    height: calc(100vh - var(--fixed-header-height));
  }

  content {
    padding: 0px !important;
  }
</style>

<Layout fullwidth={ true } fixed={ true } footer={false} authenticated={ true } testid="page-admin-{ params.what }">
  <content>
    <left>
      <Sidebar on:select={ sidebar_select } menu={ panels }>
        <div slot="top">
          <h3>Admin Dashboard</h3>
        </div>
      </Sidebar>
    </left>

    <right>
      <svelte:component this={selected.component} />
    </right>
  </content>
</Layout>