jsGiven/jsGiven

<script src="https://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<style type="text/css">
    .jsGivenNavBar {
        height: 40px;
        background-color: #2d343a;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0px 40px;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    }
    .jsGivenNavBar .navbar-icon {
        height: 25px;
        vertical-align: top;
    }
    .jsGivenNavBar .nav-link {
        color: rgba(255,255,255,0.7);
        text-decoration: none;
        padding: 0px 10px;
    }
    .jsGivenNavBar .nav-link:hover {
        color: rgba(255,255,255,0.8);
        text-decoration: none;
    }
    .jsGivenNavBar .nav-link path {
        fill: rgba(255,255,255,0.7);
    }
    .jsGivenNavBar .nav-link:hover path {
        fill: rgba(255,255,255,0.8);
    }
    .searchBar {
        height: 50px;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0px 40px;
        flex-direction: column-reverse;
        margin-right: 4rem;
        margin-top: 1rem;
    }
    .searchBarInput {
        border: 1px solid rgba(0,0,0,0.15);
        border-radius: 0.25rem;
        display: block;
        width: 100%;
        padding: 0.5rem 1.6rem;
        font-size: 1rem;
        line-height: 1.25;
    }
    .search-icon {
        position: relative;
        z-index: 1;
        width: 0.9rem;
        height: 0.9rem;
        top: -0.1rem;
        left: 1.3rem;
        fill: #55595c;
    }
    @media (max-width: 450px) {
        .search-icon {
            display: none;
        }
    }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
<script type="text/javascript">
    var htmlSearchBar = '<div class="searchBar">' +
        '<div>' +
            '<svg class="search-icon " xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">' +
                '<path d="M6.213 12.548C2.783 12.548 0 9.738 0 6.274 0 2.81 2.782 0 6.213 0c3.432 0 6.214 2.81 6.214 6.274 0 1.358-.428 2.616-1.154 3.643L15 13.482 13.576 15l-3.77-3.606c-1.015.727-2.254 1.154-3.593 1.154zm0-2.09c2.288 0 4.143-1.874 4.143-4.184S8.5 2.09 6.213 2.09c-2.287 0-4.142 1.874-4.142 4.184s1.856 4.183 4.143 4.183z"></path>' +
            '</svg>' +
            '<input type="search" id="searchBarInput" class="searchBarInput" placeholder="Search docs..." autocomplete="off" spellcheck="false" dir="auto" />' +
        '<div>' +
    '</div>';

    $(() => $('body').each((i, body) => {
        var $body = $(body);
        var $searchBar = $(htmlSearchBar);

        $body.prepend($searchBar);

        docsearch({
            apiKey: '1202ad8f9aae7e96f924ec6256f215c1',
            indexName: 'jsgiven',
            inputSelector: '#searchBarInput',
            debug: false // Set debug to true if you want to inspect the dropdown
        });
    }));
</script>
<script type="text/javascript">
    var html = '<div class="jsGivenNavBar">' +
        '<div>' +
            '<a class="nav-link" href=".">JsGiven</a>' +
            '<a class="nav-link" href="user-guide.html">User guide</a>' +
        '</div>' +
        '<a class="nav-link nav-github" href="https://github.com/jsGiven/jsGiven">' +
            '<svg class="github navbar-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32.6 31.8">' +
                '<path d="M16.3 0C7.3 0 0 7.3 0 16.3c0 7.2 4.7 13.3 11.1 15.5.8.1 1.1-.4 1.1-.8v-2.8c-4.5 1-5.5-2.2-5.5-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.5 2.5 3.8 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.4-1.8-7.4-8.1 0-1.8.6-3.2 1.7-4.4-.1-.3-.7-2 .2-4.2 0 0 1.4-.4 4.5 1.7 1.3-.4 2.7-.5 4.1-.5 1.4 0 2.8.2 4.1.5 3.1-2.1 4.5-1.7 4.5-1.7.9 2.2.3 3.9.2 4.3 1 1.1 1.7 2.6 1.7 4.4 0 6.3-3.8 7.6-7.4 8 .6.5 1.1 1.5 1.1 3V31c0 .4.3.9 1.1.8 6.5-2.2 11.1-8.3 11.1-15.5C32.6 7.3 25.3 0 16.3 0z"></path>' +
            '</svg>'+
        '</a>' +
    '</div>';

    $(() => $('body').each((i, body) => {
        var $body = $(body);
        var $navBar = $(html);

        $body.prepend($navBar);
    }));
</script>