greenwhale/app/components/topVisual.vue

<template>  
    <section id="top--visual" :class="className">
      <div class="inner--content">
        <h1>{{ title }}</h1>
        <nav>
          <ul>
            <li>
              <NuxtLink to="/">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                  <mask id="mask0_127_65147" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
                  <rect width="20" height="20" fill="#D9D9D9"/>
                  </mask>
                  <g mask="url(#mask0_127_65147)">
                  <path d="M3.75 17.0833V7.70833L10 3L16.25 7.70833V17.0833H11.5833V11.5H8.41667V17.0833H3.75Z" fill="white"/>
                  </g>
                </svg>
              </NuxtLink>            
            </li>
            <li v-for="(nav, index) in navigation" :key="nav.name" @mouseenter="showDropdown(index)" @mouseleave="hideDropdown">
              <NuxtLink :to="nav.link">{{ nav.name }}
                <i v-if="nav.gnbList" :class="{ 'active': openDropdown === index }">
                  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
                    <mask id="mask0_127_68809" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
                    <rect width="20" height="20" fill="#D9D9D9"/>
                    </mask>
                    <g mask="url(#mask0_127_68809)">
                    <path d="M9.99935 12.9372L5.29102 8.20801L6.16602 7.33301L9.99935 11.1663L13.8327 7.33301L14.7077 8.20801L9.99935 12.9372Z" fill="white"/>
                    </g>
                  </svg>
                </i>
              </NuxtLink>
              <ul v-if="nav.gnbList" :class="{ 'show': openDropdown === index }">
                <li v-for="gnb in nav.gnbList" :key="gnb.name">
                  <NuxtLink :to="gnb.link">{{ gnb.name }}</NuxtLink>
                </li>
              </ul>
            </li>
          </ul>
        </nav>
      </div>
    </section>
</template>

<script>
export default {
  name: 'TopVisual',
  props: {
    className: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    },
    navigation: {
      type: Array,
      required: true
    }    
  },
  data() {
    return {
      openDropdown: null
    }
  },
  methods: {
    showDropdown(index) {
      this.openDropdown = index;
    },
    hideDropdown() {
      this.openDropdown = null;
    }
  }
}
</script>