lucent-laravel/front/js/svelte/Navbar.svelte

<script>
    import Avatar from "./account/Avatar.svelte";
    import NavbarMenu from "./NavbarMenu.svelte";
    import {getContext} from "svelte";

    export let schema;
    const channel = getContext("channel");
    const readableSchemas = getContext("readableSchemas");
    const user = getContext("user");

    let contentIsOpen = false;
    const fileSchemas = readableSchemas.filter((sc) => sc.type === "files");
    const otherSchemas = readableSchemas.filter((sc) => !sc.isEntry && sc.type === "collection");

</script>

<nav class="lx-nav">

    <div>
        <button on:click={(e) => contentIsOpen = true} class="btn btn-primary btn-sm d-xxl-none">« Content</button>
    </div>
    <div class="d-flex  align-items-center ">
        <a class="nav-item" href="{channel.lucentUrl}">{channel.name}</a>
        <a class="nav-item" href="{channel.lucentUrl}/members">Members</a>

        {#if channel.generateCommand}
            <a href="{channel.lucentUrl}/build-report" class="btn btn-outline-primary btn-sm d-">Build website</a>
        {/if}
<!--        <div>-->
<!--            <form method="GET">-->
<!--                <input type="search" name="filter[search_regex]" placeholder="Search"-->
<!--                       class="form-control" required/>-->
<!--            </form>-->
<!--        </div>-->
    </div>
    <div>
        <a class="nav-item" href="{channel.lucentUrl}/profile">
            <Avatar side="28" name={user.name}/>
        </a>
    </div>


</nav>

<div class="offcanvas offcanvas-start  d-xxl-block show border-0 bg-light-subtle" class:d-none={!contentIsOpen}
     style="padding-top:36px " data-bs-scroll="true"
     data-bs-backdrop="false"
     tabindex="-1" aria-labelledby="offcanvasScrollingLabel">
    <!--        <div class="offcanvas-header">-->
    <!--            <h5 class="offcanvas-title" id="offcanvasScrollingLabel">Content</h5>-->
    <!--        </div>-->
    <div class="offcanvas-body">
        <button on:click={(e) => contentIsOpen = false} class="btn btn-primary btn-sm d-xxl-none mb-4">« close</button>
        <div class="accordion">
            <div class="accordion-item">
                <h2 class="accordion-header" id="panelsStayOpen-headingMain">
                    <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#panelsStayOpen-collapseMain" aria-expanded="true"
                            aria-controls="panelsStayOpen-collapseMain">
                        Main
                    </button>
                </h2>
                <div id="panelsStayOpen-collapseMain" class="accordion-collapse collapse show"
                     aria-labelledby="panelsStayOpen-headingMain">
                    <div class="accordion-body">
                        <NavbarMenu
                                schemas={ readableSchemas.filter((sc) => sc.isEntry)}
                                schema={schema}
                        />
                    </div>
                </div>
            </div>
            {#if otherSchemas.length > 0}
                <div class="accordion-item">
                    <h2 class="accordion-header" id="panelsStayOpen-headingOther">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#panelsStayOpen-collapseOther" aria-expanded="false"
                                aria-controls="panelsStayOpen-collapseOther">
                            Other
                        </button>
                    </h2>
                    <div id="panelsStayOpen-collapseOther" class="accordion-collapse collapse"
                         aria-labelledby="panelsStayOpen-headingOther">
                        <div class="accordion-body">
                            <NavbarMenu
                                    schemas={ otherSchemas}
                                    schema={schema}
                            />
                        </div>
                    </div>
                </div>
            {/if}
            {#if fileSchemas.length > 0}
                <div class="accordion-item">
                    <h2 class="accordion-header" id="panelsStayOpen-headingFS">
                        <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#panelsStayOpen-collapseFS" aria-expanded="false"
                                aria-controls="panelsStayOpen-collapseFS">
                            Filesystem
                        </button>
                    </h2>
                    <div id="panelsStayOpen-collapseFS" class="accordion-collapse collapse"
                         aria-labelledby="panelsStayOpen-headingFS">
                        <div class="accordion-body">
                            <NavbarMenu
                                    schemas={ fileSchemas}
                                    schema={schema}
                            />
                        </div>
                    </div>
                </div>
            {/if}

        </div>
    </div>
</div>