header.vue

<template>
  <div class="header">
    <transition name="fade">
      <dt-header-search v-if="searchEnable" @search="toggleSearch" />
      <dt-header-normal v-else @search="toggleSearch" />
    </transition>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
import HeaderNormalWidget from '@/components/header_normal.vue';
import HeaderSearchWidget from '@/components/header_search.vue';

@Component({
  components: {
    'dt-header-normal': HeaderNormalWidget,
    'dt-header-search': HeaderSearchWidget
  },
})

export default class HeaderWidget extends Vue {
  searchEnable : boolean = false

  // basculer la variable searchEnable
  toggleSearch() {
    this.searchEnable = !this.searchEnable
  }
}
</script>

<style lang="scss" scoped>
.header { 
  position: relative;
  height: 40px;
}

.fade-enter-active, .fade-leave-active {
  transition: opacity 2s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

header_normal.vue

<template>
  <div class="header-normal">
    <ul>
      <li>DataTransition Ptolemy</li>
      <li>
        <v-btn depressed @click="enableSearch">
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';

@Component({
  components: {
  },
  methods: {
    enableSearch() {
      this.$emit('search')
    }
  }
})

export default class HeaderNormalWidget extends Vue {
}
</script>

<style lang="scss" scoped>
.header-normal { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;

  background-color: lightgreen;
  ul {
    list-style-type: none;

    li {
      display: inline;
      margin-right: 1em;
    }
  }
}

</style>

header_search.vue

<template>
  <div class="header-search">
    <ul>
      <li><input class="search-query" type="text" placeholder="Recherche dans les taches, les media, ..."/></li>
      <li>
        <v-btn depressed>
          <v-icon>mdi-magnify</v-icon>
        </v-btn>
      </li>
      <li>
        <v-btn depressed @click="closeSearch">
          <v-icon>mdi-close</v-icon>
        </v-btn>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';

@Component({
  components: {
  },
})

export default class HeaderSearchWidget extends Vue {
  closeSearch() {
    this.$emit('search')
  }
}
</script>

<style lang="scss" scoped>
.header-search { 
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: red;

  ul {
    list-style-type: none;

    li {
      display: inline;
      margin-right: 1em;
    }
  }

  .search-query { 
    width: 60%;
  }
}

</style>