piratezon_new/app/components/breadCrumbs.vue

<template>
  <div class="breadcrumbs--wrap">
    <div class="container">
      <div class="menu--wrap">
        <p class="main--menu">{{ mainMenu }}</p>
        <span class="bar"></span>
        <div class="sub--menu--wrap" ref="menuWrap">
          <p class="sub--menu" @click="toggleNav" :style="{ width: width + 'px' }">
            <span class="ellipsis1">
              {{ currentSubMenu }}
            </span>
            <i class="ico"></i>
          </p>

          <div class="nav--wrap" :class="{ active: isNavOpen }">
            <NuxtLink
              v-for="(item, index) in subMenuItems"
              :key="index"
              :to="item.to"
              class="sub--menu2"
              :class="{ active: isActiveRoute(item.to) }"
              @click="isNavOpen = false"
            >
              {{ item.label }}
            </NuxtLink>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { ref, onMounted, onUnmounted } from "vue";

  const route = useRoute();

  // Props 정의
  const props = defineProps({
    // 가로 넓이
    width: {
      type: String,
      default: "180",
    },
    // 메인 메뉴 타이틀 (예: NETWORK, VEHICLES, OWNER 등)
    mainMenu: {
      type: String,
      default: "NETWORK",
    },
    // 현재 선택된 서브메뉴 타이틀 (예: 전시장 및 서비스센터)
    currentSubMenu: {
      type: String,
      default: "메뉴를 선택하세요",
    },
    // 서브메뉴 아이템 리스트
    subMenuItems: {
      type: Array,
      default: () => [],
      // 예시 구조: [{ label: '전시장 찾기', to: '/ford/network/showroom', active: true }, ...]
    },
  });

  const isNavOpen = ref(false);
  const menuWrap = ref(null);

  const toggleNav = () => {
    isNavOpen.value = !isNavOpen.value;
  };

  // 현재 route와 비교하여 active 여부 판단
  const isActiveRoute = (to) => {
    if (!to) return false;
    // 현재 전체 경로 (쿼리 포함)
    const currentFullPath = route.fullPath;
    // to가 쿼리를 포함하는 경우 전체 비교
    if (to.includes("?")) {
      return currentFullPath === to || currentFullPath.startsWith(to + "&");
    }
    // 쿼리 없는 경우 path만 비교하고 쿼리가 없어야 함
    return route.path === to && Object.keys(route.query).length === 0;
  };

  const handleClickOutside = (event) => {
    if (menuWrap.value && !menuWrap.value.contains(event.target)) {
      isNavOpen.value = false;
    }
  };

  onMounted(() => {
    document.addEventListener("click", handleClickOutside);
  });

  onUnmounted(() => {
    document.removeEventListener("click", handleClickOutside);
  });
</script>