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

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

    export let sidebar;
    const channel = getContext("channel");
    const user = getContext("user");
    let contentIsOpen = false;
</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 ">

<!--        <div>-->
<!--            <form method="GET">-->
<!--                <input type="search" name="filter[search_regex]" placeholder="Search"-->
<!--                       class="form-control" required/>-->
<!--            </form>-->
<!--        </div>-->
    </div>
    <div class="d-flex  align-items-center ">
        <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}
        <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-primary-subtle " class:d-none={!contentIsOpen}
      data-bs-scroll="true"
     data-bs-backdrop="false"
     tabindex="-1" aria-labelledby="offcanvasScrollingLabel">
    <div class="offcanvas-body">
        <button on:click={(e) => contentIsOpen = false} class="btn btn-primary btn-sm d-xxl-none mb-4">« close</button>
        {@html sidebar}
    </div>
</div>