|
|
|
|
<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>
|
