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.

136 lines
3.7 KiB

<script>
import { onMount } from 'svelte';
import Sidebar from "$/client/components/Sidebar.svelte";
import IconFinder from "$/admin/bando/IconFinder.svelte";
import Djenterator from "$/admin/bando/Djenterator.svelte";
import Layout from "$/client/Layout.svelte";
import HTML from "$/client/components/HTML.svelte";
import { replace } from "svelte-spa-router";
export let params={what: "intro"};
let panels = [
{url: "intro", title: "Introduction", active: true, icon: "list-start", html: "/docs/api/index.html"},
{url: "quick", title: "Quick Start", active: false, icon: "baby", html: "/docs/quick-start/index.html"},
{url: "long", title: "Long Start", active: false, icon: "rocket", html: "/docs/long-start/index.html"},
{url: "howto", title: "HOWTO Recipes", active: false, icon: "cake", href: "/docs/howto/"},
{url: "tips-tricks", title: "Tips & Tricks", active: false, icon: "bomb", html: "/docs/tips-tricks/"},
{url: "docs", title: "API Docs", active: false, icon: "book", href: "/client/#/docs/"},
{url: "demos", title: "Demos", active: false, icon: "component", href: "/client/#/bando/components/"},
{url: "icons", title: "Icons", active: false, icon: "smile", component: IconFinder, props: {}},
{url: "djenterator", title: "Djenterator", active: false, icon: "layout-template", component: Djenterator, props: {}},
];
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) => {
let found = panels[0];
for(let panel of panels) {
if(url === panel.url) {
found = panel;
} else {
panel.active = false;
}
}
selected = found;
selected.active = true;
panels = panels;
}
$:if(selected && params.what && params.what != selected.url) {
url_select(params.what);
}
onMount(() => {
url_select(params.what);
});
</script>
<style>
content > 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));
overflow-y: auto;
width: unset;
}
content > left {
display: flex;
max-width: min-content;
min-width: min-content;
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;
}
:global(a.howto b) {
background-color: var(--color-info);
color: var(--color);
margin-bottom: 25px;
}
@media only screen and (max-width: 600px) {
content {
flex-direction: column;
}
content > right,
content > left {
max-width: 100%;
min-width: 100%;
width: 100%;
max-height: min-content;
min-height: min-content;
height: min-content;
overflow-y: initial;
}
}
</style>
<Layout fullwidth={ true } fixed={ true } footer={false} auth_optional={ true } testid="home-page">
<content>
<left>
<Sidebar on:select={ sidebar_select } menu={ panels }>
<div slot="top">
<h3>Documentation</h3>
</div>
</Sidebar>
</left>
<right>
{#if selected.component}
<svelte:component this={ selected.component} {...selected.props }/>
{:else if selected.html}
<HTML url={ selected.html }/>
{:else}
<h1>Invalid Properties in Sidebar</h1>
{/if}
</right>
</content>
</Layout>