flylocal-web/components/TheHeader.vue

<template>
  <header>
    <div class="header__col">
      <Logo />
      <div v-if="!selectedOrig.iata" class="logo-blurb">
        from one of <strong>{{ airportsOrig.length }}</strong>
        <span style="color: white;">local</span> airports
      </div>
      <div
        v-if="
          selectedOrig.iata && !selectedDest.iata && airports_dest.length > 1
        "
        class="logo-blurb"
      >
        to one of <strong>{{ airportsDest.length }}</strong>
        {{ getCompliment }} destinations
      </div>
    </div>
    <div class="header__col">
      <div v-show="!isPickerVisible">
        <button class="btn btn--primary" @click="showPicker">
          tap the map or search 🔎
        </button>
      </div>
      <div v-show="isPickerVisible">
        <button class="btn btn--primary" @click="showPicker">
          hide search <svg
            xmlns="http://www.w3.org/2000/svg"
            class="icon icon-tabler icon-tabler-arrow-bar-to-up"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            stroke-width="3"
            stroke="#ffffff"
            fill="none"
            stroke-linecap="round"
            stroke-linejoin="round"
          >
            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
            <line x1="12" y1="10" x2="12" y2="20" />
            <line x1="12" y1="10" x2="16" y2="14" />
            <line x1="12" y1="10" x2="8" y2="14" />
            <line x1="4" y1="4" x2="20" y2="4" />
          </svg>
        </button>
      </div>
    </div>
    <div class="header__col" />
  </header>
</template>

<script>
export default {
  props: {
    selectedOrig: {
      type: [Object],
      default () {
        return {}
      }
    },
    selectedDest: {
      type: [Object],
      default () {
        return {}
      }
    },
    airportsOrig: {
      type: [Array],
      default () {
        return []
      }
    },
    airportsDest: {
      type: [Array],
      default () {
        return []
      }
    },
    isPickerVisible: {
      type: [Boolean],
      default () {
        return null
      }
    }
  }
}
</script>

<style>
.asdf {
  color: red;
}
</style>