lucent-laravel/front/js/layouts/NavbarMenu.svelte

<script>
    import {getContext} from "svelte";
    import Icon from "../common/Icon.svelte";

    const channel = getContext("channel");
    export let schemas;
    export let title;
    export let schema;
    export let expanded = false;

    if(schemas.find(s => s.name === schema?.name)){
        expanded = true;
    }

    function toggleExpand(){
        expanded = !expanded;
    }
</script>

<button class="sidebar-header"  tabindex="0" on:click={toggleExpand}>
    {title}
    {#if expanded}
        <Icon icon="circle-chevron-up"></Icon>
    {:else}
        <Icon icon="circle-chevron-down"></Icon>
    {/if}
</button>
{#if expanded}
    {#each schemas 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}