This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
bandolier-template/admin/pages/Home.svelte

104 lines
3.1 KiB

<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: "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},
{url: "icons", title: "Icons", active: false, icon: "smile", component: IconFinder},
{url: "demos", title: "Components", active: false, icon: "component", href: "/admin/#/bando/components/"},
{url: "routes", title: "Routes", active: false, icon: "code-2", href: "/admin/#/routes/"},
{url: "errors", title: "Errors", active: false, icon: "alert-circle", href: "/admin/#/errors/"},
{url: "djenterator", title: "Djenterator", active: false, icon: "layout-template", component: Djenterator},
];
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>