talos/docs/website/components/Dropdown.vue

<template>
  <div class="dropdown inline-block">
    <button class="font-semibold py-2 px-4 rounded inline-flex items-center">
      <svg
        id="dropdown-caret"
        class="h-6 w-6 fill-current mr-2"
        viewBox="0 0 32 32"
        aria-hidden="true"
      >
        <path
          d="M16.003 18.626l7.081-7.081L25 13.46l-8.997 8.998-9.003-9 1.917-1.916z"
        />
      </svg>
      <span class="mr-1">{{ dropdownTitle() }}</span>
    </button>
    <ul class="dropdown-menu absolute pt-1 w-full shadow-md">
      <li class="" v-for="option in options" :key="option.version">
        <a
          @click="handleClick(option)"
          :href="option.url"
          class="rounded-t py-2 px-4 block whitespace-no-wrap"
          >{{ version(option) }}</a
        >
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Dropdown',

  data() {
    return {
      options: [
        { version: 'v0.3', url: '/docs/v0.3', prerelease: true },
        { version: 'v0.2', url: '/docs/v0.2', prerelease: false }
      ]
    }
  },

  methods: {
    handleClick(option) {
      this.$store.commit('sidebar/setVersion', option.version)
    },

    dropdownTitle() {
      const version = this.$store.state.sidebar.version
      if (version === '') {
        return 'Documentation'
      }

      return `Documentation (${version})`
    },

    version(option) {
      if (option.prerelease) {
        return `${option.version} (pre-release)`
      }

      return option.version
    }
  }
}
</script>

<style>
.dropdown {
  @apply font-headings;
  font-size: 20px;
}

.dropdown-menu {
  width: auto;
  display: none;
  height: 0px;
  background: white;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#dropdown-caret {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.dropdown:hover #dropdown-caret {
  transform: rotateX(180deg);
}

.dropdown:hover .dropdown-menu {
  display: block;
  height: 100px;
}
</style>