koel/resources/assets/js/components/site-header/search-form.vue

<template>
  <div class="side search" id="searchForm" :class="{ showing: showing }">
    <input type="search"
      :class="{ dirty: q }"
      @input="filter"
      placeholder="Search"
      v-model="q"
      v-koel-focus="showing">
  </div>
</template>

<script>
import isMobile from 'ismobilejs';
import { debounce } from 'lodash';

import { event } from '../../utils';

export default {
  name: 'site-header--search-form',

  data() {
    return {
      q: '',
      showing: !isMobile.phone,
    };
  },

  methods: {
    /**
     * Limit the filter's execution rate using lodash's debounce.
     */
    filter: debounce(function () {
      event.emit('filter:changed', this.q);
    }, 200),
  },

  created() {
    event.on('search:toggle', () => {
      this.showing = !this.showing;
    });

    event.on('koel:teardown', () => {
      this.q = '';
      this.filter();
    })
  },
};
</script>

<style lang="sass">
@import "../../../sass/partials/_vars.scss";
@import "../../../sass/partials/_mixins.scss";

#searchForm {
  @include vertical-center();
  flex: 0 0 256px;
  order: -1;
  background: $colorSearchFormBgr;

  input[type="search"] {
    width: 218px;
    margin-top: 0;
  }

  @media only screen and (max-width : 667px) {
    z-index: -1;
    position: absolute;
    left: 0;
    background: rgba(0, 0, 0, .8);
    width: 100%;
    padding: 12px;
    top: 0;

    &.showing {
      top: $headerHeight;
      z-index: 100;
    }

    input[type="search"] {
      width: 100%;
    }
  }
}
</style>