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 user = getContext("user");


</script>

<nav class="lx-nav">

    <div>

    </div>
    <div>
        <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">Build website</a>
        {/if}
    </div>
    <div>
        <a class="nav-item" href="{channel.lucentUrl}/profile">
            <Avatar side="28" name={user.name}/>
        </a>
    </div>


</nav>

<div class="offcanvas offcanvas-start show border-0 bg-light-subtle" 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">

        <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={ channel.schemas.filter((sc) => sc.isEntry)}
                                schema={schema}
                        />
                    </div>
                </div>
            </div>
            <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={ channel.schemas.filter((sc) => !sc.isEntry && sc.type !== "files")}
                                schema={schema}
                        />
                    </div>
                </div>
            </div>
            <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={ channel.schemas.filter((sc) => sc.type === "files")}
                                schema={schema}
                        />
                    </div>
                </div>
            </div>


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