audi/app/components/header.vue

<template>
  <header>
    <div class="header--wrap">
      <!-- 햄버거 버튼 (모바일) -->
      <button
        class="header--hamburger"
        :class="{ active: isMobileMenuOpen }"
        @click="toggleMobileMenu"
        aria-label="메뉴"
      >
        <span></span>
        <span></span>
        <span></span>
      </button>

      <div class="header--logo--wrap">
        <a aria-label="Audi" href="/" title="Audi" class="navigation"
          ><svg
            xmlns="http://www.w3.org/2000/svg"
            width="69"
            height="24"
            viewBox="0 0 69 24"
            fill="none"
          >
            <path
              d="M57.0623 21.3142C54.9409 21.3142 52.9856 20.5922 51.422 19.3822C53.0087 17.3448 53.9585 14.7826 53.9585 12C53.9585 9.21768 53.0087 6.65544 51.422 4.61784C52.9856 3.408 54.9409 2.68584 57.0623 2.68584C62.1714 2.68584 66.3281 6.86424 66.3281 12C66.3281 17.136 62.1714 21.3142 57.0623 21.3142ZM36.3802 19.3822C37.9672 17.3448 38.917 14.7826 38.917 12C38.917 9.21768 37.9672 6.65544 36.3804 4.61784C37.9438 3.408 39.8997 2.68584 42.0208 2.68584C44.1421 2.68584 46.0975 3.408 47.6611 4.61784C46.0743 6.65544 45.1246 9.21768 45.1246 12C45.1246 14.7826 46.0743 17.3448 47.6611 19.3822C46.0975 20.5922 44.1421 21.3142 42.0208 21.3142C39.8997 21.3142 37.9438 20.5922 36.3802 19.3822ZM21.3387 19.3822C22.9257 17.3448 23.8754 14.7826 23.8754 12C23.8754 9.21768 22.9257 6.65544 21.3389 4.61784C22.9023 3.408 24.8581 2.68584 26.9792 2.68584C29.1003 2.68584 31.0562 3.408 32.6196 4.61784C31.0328 6.65544 30.083 9.21768 30.083 12C30.083 14.7826 31.0328 17.3448 32.6196 19.3822C31.0562 20.5922 29.1003 21.3142 26.9792 21.3142C24.8581 21.3142 22.9023 20.5922 21.3387 19.3822ZM2.6719 12C2.6719 6.86424 6.82861 2.68584 11.9377 2.68584C14.0588 2.68584 16.0147 3.408 17.578 4.61784C15.9913 6.65544 15.0415 9.21768 15.0415 12C15.0415 14.7826 15.9913 17.3448 17.578 19.3822C16.0147 20.5922 14.0588 21.3142 11.9377 21.3142C6.82861 21.3142 2.6719 17.136 2.6719 12ZM19.4585 17.4305C18.3619 15.9005 17.7134 14.0256 17.7134 12C17.7134 9.97464 18.3619 8.09952 19.4585 6.56952C20.5551 8.09952 21.2035 9.97464 21.2035 12C21.2035 14.0256 20.5551 15.9005 19.4585 17.4305ZM34.5 17.4305C33.4034 15.9005 32.7549 14.0256 32.7549 12C32.7549 9.97464 33.4034 8.09952 34.5 6.56952C35.5966 8.09952 36.2451 9.97464 36.2451 12C36.2451 14.0256 35.5966 15.9005 34.5 17.4305ZM49.5415 17.4305C48.4449 15.9005 47.7965 14.0256 47.7965 12C47.7965 9.97464 48.4449 8.09952 49.5415 6.56952C50.6381 8.09952 51.2866 9.97464 51.2866 12C51.2866 14.0256 50.6381 15.9005 49.5415 17.4305ZM57.0623 0C54.2135 0 51.5958 1.00968 49.5415 2.68968C47.4873 1.00968 44.8696 0 42.0208 0C39.1719 0 36.5542 1.00968 34.5 2.68968C32.4458 1.00968 29.8278 0 26.9792 0C24.1304 0 21.5127 1.00968 19.4585 2.68968C17.4042 1.00968 14.7863 0 11.9377 0C5.35526 0 0 5.3832 0 12C0 18.617 5.35526 24 11.9377 24C14.7863 24 17.4042 22.9906 19.4585 21.3103C21.5127 22.9906 24.1304 24 26.9792 24C29.8278 24 32.4458 22.9906 34.5 21.3103C36.5542 22.9906 39.1719 24 42.0208 24C44.8696 24 47.4873 22.9906 49.5415 21.3103C51.5958 22.9906 54.2135 24 57.0623 24C63.6447 24 69 18.617 69 12C69 5.3832 63.6447 0 57.0623 0Z"
              fill="white"
            ></path>
          </svg>
          <strong>Audi</strong>
        </a>
      </div>
      <div class="header--menu--wrap">
        <NuxtLink to="/models">Models</NuxtLink>
        <a @click="toggleSubmenu(1)">About Audi</a>
        <a @click="toggleSubmenu(2)">About Service</a>
        <a @click="toggleSubmenu(3)">About exclusive</a>
        <a @click="toggleSubmenu(4)">Stories of Progress</a>
        <a @click="toggleSubmenu(5)">Company</a>
        <NuxtLink to="http://www.audiusedcar.co.kr/index.php" target="_blank">Used Car(AAP)</NuxtLink>
      </div>
      <div class="header--search--wrap">
        <!-- <UButton class="search--btn"></UButton> -->
      </div>
    </div>

    <!-- Dim -->
    <div
      class="header--dim"
      :class="{ active: activeSubmenu !== null }"
      @click="closeSubmenu"
    ></div>

    <!-- Submenu Navigation -->
    <div
      class="header--submenu"
      :class="{ active: activeSubmenu !== null }"
    >
      <div class="submenu--content">
        <!-- Models Submenu -->
        <div v-if="activeSubmenu === 0" class="submenu--list">
          <NuxtLink to="/models/sedan">아우디 코리아 Sedan</NuxtLink>
          <NuxtLink to="/models/suv">아우디 코리아 SUV</NuxtLink>
          <NuxtLink to="/models/coupe">아우디 코리아 Coupe</NuxtLink>
          <NuxtLink to="/models/sportback">아우디 코리아 Sportback</NuxtLink>
          <NuxtLink to="/models/etron">아우디 코리아 전기차</NuxtLink>
          <NuxtLink to="/models/srange">아우디 코리아 S range</NuxtLink>
          <NuxtLink to="/models/rsrange">아우디 코리아 RS range</NuxtLink>
        </div>

        <!-- About Audi Submenu -->
        <div v-if="activeSubmenu === 1" class="submenu--list">
          <NuxtLink to="/service/careprogram/diesel">고객안내</NuxtLink>
          <NuxtLink to="/aboutaudi/audi-brand-2023">아우디 브랜드 소개</NuxtLink>
          <NuxtLink to="/aboutaudi">아우디 브랜드 히스토리</NuxtLink>
          <NuxtLink to="/aboutaudi/quattro">quattro 시스템</NuxtLink>
          <NuxtLink to="/aboutaudi/audi_connect">Audi Connect</NuxtLink>
          <NuxtLink to="/aboutaudi/morepossibilities">More possibilities</NuxtLink>
          <NuxtLink to="/aboutaudi/futureisanattitude">Future is an attitude</NuxtLink>
          <NuxtLink to="/aboutaudi/myaudiworld">myAudiworld</NuxtLink>
          <NuxtLink to="/etronms/">Audi e-tron 모빌리티 서비스</NuxtLink>
          <NuxtLink to="/aboutaudi/auditoyou">Audi to you 찾아가는 시승 서비스</NuxtLink>
        </div>

        <!-- About Service Submenu -->
        <div v-if="activeSubmenu === 2" class="submenu--list">
          <NuxtLink to="/service">아우디 서비스</NuxtLink>
          <NuxtLink to="/service/program">서비스 프로그램</NuxtLink>
          <NuxtLink to="/service/careprogram/">아우디 e-tron 케어 프로그램</NuxtLink>
          <NuxtLink to="/service/program/dealersearch?filter=as">AS센터</NuxtLink>
          <NuxtLink to="https://www.audikoreaevent.co.kr/app/rsvt/applyServiceReservation.do" target="_blank">서비스 예약</NuxtLink>
          <NuxtLink to="/service/careprogram/carecenter">고객지원센터</NuxtLink>
          <NuxtLink to="/service/genuineparts">아우디 순정부품</NuxtLink>
          <NuxtLink to="/service/acc">아우디 순정 액세서리</NuxtLink>
          <NuxtLink to="/service/navigationdown">내비게이션 데이터 다운로드</NuxtLink>
          <NuxtLink to="https://www.audikoreaevent.co.kr/etc/component/index1.jsp" target="_blank">부품 가격 정보</NuxtLink>
          <NuxtLink to="/service/advisor">사설수리업체를 위한 권고사항</NuxtLink>
          <NuxtLink to="/service/videomenual">아우디 영상 매뉴얼</NuxtLink>
          <NuxtLink to="/service/qna">아우디 차량 Q&A</NuxtLink>
        </div>

        <!-- About exclusive Submenu -->
        <div v-if="activeSubmenu === 3" class="submenu--list">
          <NuxtLink to="/exclusive/exclusive-order">exclusive order</NuxtLink>
          <NuxtLink to="/exclusive/exclusive-edition">exclusive edition</NuxtLink>
        </div>

        <!-- Stories of Progress Submenu -->
        <div v-if="activeSubmenu === 4" class="submenu--list">
          <NuxtLink to="/stories/technology">Technology</NuxtLink>
          <NuxtLink to="/stories/future">Future</NuxtLink>
          <NuxtLink to="/stories/design">Design</NuxtLink>
          <NuxtLink to="/stories/sustainability">Sustainability</NuxtLink>
          <NuxtLink to="/stories/lifestyle">Lifestyle</NuxtLink>
          <NuxtLink to="/stories/audi-sport">Audi Sport</NuxtLink>
        </div>

        <!-- Company Submenu -->
        <div v-if="activeSubmenu === 5" class="submenu--list">
          <NuxtLink to="/company/about">About Gojin Motors</NuxtLink>
          <NuxtLink to="/company/ceo">CEO</NuxtLink>
          <NuxtLink to="/company/history">History</NuxtLink>
          <NuxtLink to="/company/ir">IR</NuxtLink>
          <NuxtLink to="/company/showroom">Showroom</NuxtLink>
          <NuxtLink to="/company/serviceCenter">Service Center</NuxtLink>
          <NuxtLink to="/company/career">Career</NuxtLink>
          <NuxtLink to="/company/salesAdvisor">Sales Advisor</NuxtLink>
          <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" target="_blank">견적요청</NuxtLink>
          <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" target="_blank">시승요청</NuxtLink>
          <NuxtLink to="/company/event">Event</NuxtLink>
          <NuxtLink to="/company/news">Audi News</NuxtLink>
        </div>
      </div>
    </div>

    <!-- 모바일 메뉴 -->
    <div class="mobile--menu" :class="{ active: isMobileMenuOpen }">
      <!-- 상위 메뉴 -->
      <div class="mobile--menu--main" :class="{ hidden: activeSubMenu !== null }">
        <nav class="mobile--menu--list">
          <a @click="openMobileSubMenu(0)">Models <i class="ico"></i></a>
          <a @click="openMobileSubMenu(1)">About Audi <i class="ico"></i></a>
          <a @click="openMobileSubMenu(2)">About Service<i class="ico"></i></a>
          <a @click="openMobileSubMenu(3)">About exclusive<i class="ico"></i></a>
          <a @click="openMobileSubMenu(4)">Stories of Progress<i class="ico"></i></a>
          <a @click="openMobileSubMenu(5)">Company<i class="ico"></i></a>
          <NuxtLink to="http://www.audiusedcar.co.kr/index.php" target="_blank" @click="closeMobileMenu">Used Car(AAP)</NuxtLink>
        </nav>
      </div>

      <!-- 하위 메뉴 -->
      <div class="mobile--menu--sub" :class="{ active: activeSubMenu !== null }">
        <div class="mobile--menu--header" @click="closeMobileSubMenu" aria-label="뒤로가기">
          <button class="back--btn"></button>
          <span>{{ activeSubMenuTitle }}</span>
        </div>

        <!-- Models -->
        <nav v-if="activeSubMenu === 0" class="mobile--submenu--list">
          <NuxtLink to="/models/sedan">아우디 코리아 Sedan</NuxtLink>
          <NuxtLink to="/models/suv">아우디 코리아 SUV</NuxtLink>
          <NuxtLink to="/models/coupe">아우디 코리아 Coupe</NuxtLink>
          <NuxtLink to="/models/sportback">아우디 코리아 Sportback</NuxtLink>
          <NuxtLink to="/models/etron">아우디 코리아 전기차</NuxtLink>
          <NuxtLink to="/models/srange">아우디 코리아 S range</NuxtLink>
          <NuxtLink to="/models/rsrange">아우디 코리아 RS range</NuxtLink>
        </nav>

        <!-- About Audi -->
        <nav v-if="activeSubMenu === 1" class="mobile--submenu--list">
          <NuxtLink to="/service/careprogram/diesel">고객안내</NuxtLink>
          <NuxtLink to="/aboutaudi/audi-brand-2023">아우디 브랜드 소개</NuxtLink>
          <NuxtLink to="/aboutaudi">아우디 브랜드 히스토리</NuxtLink>
          <NuxtLink to="/aboutaudi/quattro">quattro 시스템</NuxtLink>
          <NuxtLink to="/aboutaudi/audi_connect">Audi Connect</NuxtLink>
          <NuxtLink to="/aboutaudi/morepossibilities">More possibilities</NuxtLink>
          <NuxtLink to="/aboutaudi/futureisanattitude">Future is an attitude</NuxtLink>
          <NuxtLink to="/aboutaudi/myaudiworld">myAudiworld</NuxtLink>
          <NuxtLink to="/etronms/">Audi e-tron 모빌리티 서비스</NuxtLink>
          <NuxtLink to="/aboutaudi/auditoyou">Audi to you 찾아가는 시승 서비스</NuxtLink>
        </nav>

        <!-- About Service -->
        <nav v-if="activeSubMenu === 2" class="mobile--submenu--list">
          <NuxtLink to="/service">아우디 서비스</NuxtLink>
          <NuxtLink to="/service/program">서비스 프로그램</NuxtLink>
          <NuxtLink to="/service/careprogram/">아우디 e-tron 케어 프로그램</NuxtLink>
          <NuxtLink to="/service/program/dealersearch?filter=as">AS센터</NuxtLink>
          <NuxtLink to="https://www.audikoreaevent.co.kr/app/rsvt/applyServiceReservation.do" target="_blank">서비스 예약</NuxtLink>
          <NuxtLink to="/service/careprogram/carecenter">고객지원센터</NuxtLink>
          <NuxtLink to="/service/genuineparts">아우디 순정부품</NuxtLink>
          <NuxtLink to="/service/acc">아우디 순정 액세서리</NuxtLink>
          <NuxtLink to="/service/navigationdown">내비게이션 데이터 다운로드</NuxtLink>
          <NuxtLink to="https://www.audikoreaevent.co.kr/etc/component/index1.jsp" target="_blank">부품 가격 정보</NuxtLink>
          <NuxtLink to="/service/advisor">사설수리업체를 위한 권고사항</NuxtLink>
          <NuxtLink to="/service/videomenual">아우디 영상 매뉴얼</NuxtLink>
          <NuxtLink to="/service/qna">아우디 차량 Q&A</NuxtLink>
        </nav>

        <!-- About exclusive -->
        <nav v-if="activeSubMenu === 3" class="mobile--submenu--list">
          <NuxtLink to="/exclusive/exclusive-order">exclusive order</NuxtLink>
          <NuxtLink to="/exclusive/exclusive-edition">exclusive edition</NuxtLink>
        </nav>

        <!-- Stories of Progress -->
        <nav v-if="activeSubMenu === 4" class="mobile--submenu--list">
          <NuxtLink to="/stories/technology">Technology</NuxtLink>
          <NuxtLink to="/stories/future">Future</NuxtLink>
          <NuxtLink to="/stories/design">Design</NuxtLink>
          <NuxtLink to="/stories/sustainability">Sustainability</NuxtLink>
          <NuxtLink to="/stories/lifestyle">Lifestyle</NuxtLink>
          <NuxtLink to="/stories/audi-sport">Audi Sport</NuxtLink>
        </nav>

        <!-- Company -->
        <nav v-if="activeSubMenu === 5" class="mobile--submenu--list">
          <NuxtLink to="/company/about">About Gojin Motors</NuxtLink>
          <NuxtLink to="/company/ceo">CEO</NuxtLink>
          <NuxtLink to="/company/history">History</NuxtLink>
          <NuxtLink to="/company/ir">IR</NuxtLink>
          <NuxtLink to="/company/showroom">Showroom</NuxtLink>
          <NuxtLink to="/company/serviceCenter">Service Center</NuxtLink>
          <NuxtLink to="/company/career">Career</NuxtLink>
          <NuxtLink to="/company/salesAdvisor">Sales Advisor</NuxtLink>
          <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=2" target="_blank">견적요청</NuxtLink>
          <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" target="_blank">시승요청</NuxtLink>
          <NuxtLink to="/company/event">Event</NuxtLink>
          <NuxtLink to="/company/news">Audi News</NuxtLink>
        </nav>
      </div>
    </div>
  </header>
</template>

<script setup>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const activeSubmenu = ref(null);
const isMobileMenuOpen = ref(false);
const activeSubMenu = ref(null);
const activeSubMenuTitle = ref('');

// 메뉴 제목 매핑
const menuTitles = {
  0: 'Models',
  1: 'About Audi',
  2: 'About Service',
  3: 'About exclusive',
  4: 'Stories of Progress',
  5: 'Company'
};

// 데스크탑 서브메뉴
const toggleSubmenu = (index) => {
  if (activeSubmenu.value === index) {
    activeSubmenu.value = null;
  } else {
    activeSubmenu.value = index;
  }
};

const closeSubmenu = () => {
  activeSubmenu.value = null;
};

// 모바일 메뉴
const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value;
  if (!isMobileMenuOpen.value) {
    activeSubMenu.value = null;
  }
};

const closeMobileMenu = () => {
  isMobileMenuOpen.value = false;
  activeSubMenu.value = null;
};

const openMobileSubMenu = (index) => {
  activeSubMenu.value = index;
  activeSubMenuTitle.value = menuTitles[index];
};

const closeMobileSubMenu = () => {
  activeSubMenu.value = null;
};

// 페이지 이동 시 모든 메뉴 닫기
watch(() => route.fullPath, () => {
  activeSubmenu.value = null;
  isMobileMenuOpen.value = false;
  activeSubMenu.value = null;
});
</script>