jamesperet-website-2020/themes/james-theme/layout/_partial/project-search-bar.ejs

<nav class="navbar navbar-expand-lg navbar-light bg-secondary">
    <div class="col-auto" style="padding-left: 0px;">
        <div class="btn-group align-items-center" role="group" aria-label="Basic example" style="margin-right: 10px;">
            <button type="button" class="btn btn-light noselect" v-on:click="view.type = 'thumbnails'"
                v-bind:class= "view.type == 'thumbnails' ? 'active' : ''" >
                <i class="fas fa-th"></i>
            </button>
            <button type="button" class="btn btn-light noselect" v-on:click="view.type = 'cards'"
                v-bind:class= "view.type == 'cards' ? 'active' : ''" >
                <i class="fas fa-th-large"></i>
            </button>
            <button type="button" class="btn btn-light"><i class="fas fa-bars"></i></button>
            <button type="button" class="btn btn-light"><i class="fas fa-couch"></i></i></button>
            <button type="button" class="btn btn-light"><i class="fas fa-list"></i></button>
        </div>
    </div>
    <div class="col-6">
        <form class="form-inline">
            <div class="input-group col-12">
                <div class="input-group-prepend">
                  <span class="input-group-text" id="basic-addon1"><i class="fas fa-search"></i></span>
                </div>
                <vue-tags-input
                    v-model="search_query"
                    :tags="search_tags"
                    :autocomplete-items="filterSearchTerms"
                    @tags-changed="newTags => search_tags = newTags"
                    v-on:change="filterProjects"
                    class="tags-input"
                    style="max-width: none; width: 90%;"
                >
                    <div
                    slot="autocomplete-item"
                    slot-scope="props"
                    class="my-item"
                    @click="props.performAdd(props.item)"
                    >
                        <i v-bind:class="getSearchTagIcon(props.item.type)" class="fas"></i> {{ props.item.text }}
                    </div>
                    <div
                        slot="tag-left"
                        slot-scope="props"
                        class="my-tag-left"
                        @click="props.performOpenEdit(props.index)"
                    >
                        <i v-bind:class="getSearchTagIcon(props.tag.type)" class="fas space-left"></i>  
                    </div>
                </vue-tags-input>
                
              </div>
        </form>
    </div>
    <div class="col-auto">
        <div class="dropdown">
            <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-tags"></i> Tags
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </div>
    </div>
    <div class="col-auto">
        <div class="dropdown">
            <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-filter"></i> Filters
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </div>
    </div>
    <div class="col-auto">
        <div class="dropdown">
            <button class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fas fa-eye"></i> Show
            </button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
        </div>
    </div>
    
  </nav>