Files
lucent-laravel/front/js/svelte/layout/Folder.svelte
T
2024-10-05 18:48:38 +03:00

39 lines
1.1 KiB
Svelte

<script>
import {getContext} from "svelte";
import Icon from "../common/Icon.svelte";
import Folder from "./Folder.svelte";
const channel = getContext("channel");
export let folder;
export let schema;
export let expanded = folder.shouldExpand;
function toggleExpand() {
expanded = !expanded;
}
</script>
<div class="sidebar-folder">
{#if folder.name !== ""}
<button class="sidebar-header" tabindex="0" on:click={toggleExpand}>
{folder.name.replaceAll("_", " ") ?? "Main"}
{#if expanded}
<Icon icon="circle-chevron-up"></Icon>
{:else}
<Icon icon="circle-chevron-down"></Icon>
{/if}
</button>
{/if}
{#if expanded}
{#each folder.folders as aFolder}
<Folder folder={aFolder} schema={schema}></Folder>
{/each}
{#each folder.files as aSchema}
<a class="sidebar-item" class:active={aSchema.name === schema?.name}
aria-current="page"
href="{channel.lucentUrl}/content/{aSchema.name}">{aSchema.label}</a>
{/each}
{/if}
</div>