greenwhale/app/components/header.vue

<template>
    <header>
        <div class="header--wrap" :class="{ 'white': isScrolled || isMobileMenuOpen }">
            <div class="header--container">
                <NuxtLink class="logo--wrap" to="/">그린웨일글로벌</NuxtLink>
                <ul class="menu--wrap">
                    <li class="menu--item">
                        <NuxtLink to="/company/intro">Company</NuxtLink>
                        <ul class="gnb--wrap">
                            <li><NuxtLink to="/company/intro">회사소개</NuxtLink></li>
                            <li><NuxtLink to="/company/history">회사연혁</NuxtLink></li>
                            <li><NuxtLink to="/company/partners">협력업체</NuxtLink></li>
                            <li><NuxtLink to="/company/catalog">회사소개자료</NuxtLink></li>
                        </ul>
                    </li>
                    <li class="menu--item">
                        <NuxtLink to="/products/materials">Products</NuxtLink>
                        <ul class="gnb--wrap">
                            <li><NuxtLink to="/products/materials">Materials</NuxtLink></li>
                            <li><NuxtLink to="/products/solutions">Solutions</NuxtLink></li>
                        </ul>
                    </li>
                    <li class="menu--item">
                        <NuxtLink to="/technology/facilities">Technology</NuxtLink>
                        <ul class="gnb--wrap">
                            <li><NuxtLink to="/technology/facilities">시설</NuxtLink></li>
                            <li><NuxtLink to="/technology/patents">특허 / 인증</NuxtLink></li>
                        </ul>
                    </li>
                    <li class="menu--item">
                        <NuxtLink to="/media/news">Media</NuxtLink>
                        <ul class="gnb--wrap">
                            <li><NuxtLink to="/media/news">환경뉴스</NuxtLink></li>
                            <li><NuxtLink to="/media/press">보도자료</NuxtLink></li>
                        </ul>
                    </li>
                    <li class="menu--item">
                        <NuxtLink to="/contact/notice">Contact</NuxtLink>
                        <ul class="gnb--wrap">
                            <li><NuxtLink to="/contact/notice">공지사항</NuxtLink></li>
                            <li><NuxtLink to="/contact/faq">FAQ</NuxtLink></li>
                            <li><NuxtLink to="/contact/support">고객센터</NuxtLink></li>
                            <li><NuxtLink to="/contact/location">오시는길</NuxtLink></li>
                        </ul>
                    </li>
                </ul>
                <div class="lang--wrap" :class="{ 'active': isLangOpen }" @click="toggleLang" ref="langWrap">
                    <i class="ico"></i>
                    <p>KR</p>
                    <ul class="select--wrap">
                        <li>Arabic</li>
                        <li>Chinese (Simplified)</li>
                        <li>Chinese (Traditional)</li>
                        <li>English</li>
                        <li>Esperanto</li>
                        <li>French</li>
                    </ul>
                </div>
                <div class="ham--wrap" :class="{ 'active': isMobileMenuOpen }">
                    <UButton @click="toggleMobileMenu"></UButton>
                </div>
            </div>
        </div>
        <div class="mobile--header--wrap" :class="{ 'active': isMobileMenuOpen }">
            <div class="mobile--menu--wrap">
                <ul>
                    <li>
                        <div @click="toggleAccordion('company')" :class="{ 'active': activeAccordion === 'company' }">
                            Company<i class="ico"></i>
                        </div>
                        <ul :class="{ 'active': activeAccordion === 'company' }">
                            <li><NuxtLink to="/company/intro">회사소개</NuxtLink></li>
                            <li><NuxtLink to="/company/history">회사연혁</NuxtLink></li>
                            <li><NuxtLink to="/company/partners">협력업체</NuxtLink></li>
                            <li><NuxtLink to="/company/catalog">회사소개자료</NuxtLink></li>
                        </ul>
                    </li>
                    <li>
                        <div @click="toggleAccordion('products')" :class="{ 'active': activeAccordion === 'products' }">
                            Products<i class="ico"></i>
                        </div>
                        <ul :class="{ 'active': activeAccordion === 'products' }">
                            <li><NuxtLink to="/products/materials">Materials</NuxtLink></li>
                            <li><NuxtLink to="/products/solutions">Solutions</NuxtLink></li>
                        </ul>
                    </li>
                    <li>
                        <div @click="toggleAccordion('technology')" :class="{ 'active': activeAccordion === 'technology' }">
                            Technology<i class="ico"></i>
                        </div>
                        <ul :class="{ 'active': activeAccordion === 'technology' }">
                            <li><NuxtLink to="/technology/facilities">시설</NuxtLink></li>
                            <li><NuxtLink to="/technology/patents">특허 / 인증</NuxtLink></li>
                        </ul>
                    </li>
                    <li>
                        <div @click="toggleAccordion('media')" :class="{ 'active': activeAccordion === 'media' }">
                            Media<i class="ico"></i>
                        </div>
                        <ul :class="{ 'active': activeAccordion === 'media' }">
                            <li><NuxtLink to="/media/news">환경뉴스</NuxtLink></li>
                            <li><NuxtLink to="/media/press">보도자료</NuxtLink></li>
                        </ul>
                    </li>
                    <li>
                        <div @click="toggleAccordion('contact')" :class="{ 'active': activeAccordion === 'contact' }">
                            Contact<i class="ico"></i>
                        </div>
                        <ul :class="{ 'active': activeAccordion === 'contact' }">
                            <li><NuxtLink to="/contact/notice">공지사항</NuxtLink></li>
                            <li><NuxtLink to="/contact/faq">FAQ</NuxtLink></li>
                            <li><NuxtLink to="/contact/support">고객센터</NuxtLink></li>
                            <li><NuxtLink to="/contact/location">오시는길</NuxtLink></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="mobile--lang--wrap">
                <div class="lang--wrap" :class="{ 'active': isLangOpen2 }" @click="toggleLang2" ref="langWrap2">
                    <i class="ico"></i>
                    <p>KR</p>
                    <ul class="select--wrap">
                        <li>Arabic</li>
                        <li>Chinese (Simplified)</li>
                        <li>Chinese (Traditional)</li>
                        <li>English</li>
                        <li>Esperanto</li>
                        <li>French</li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
</template>

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

const isScrolled = ref(false)
const isLangOpen = ref(false)
const isLangOpen2 = ref(false)
const isMobileMenuOpen = ref(false)
const activeAccordion = ref(null)
const langWrap = ref(null)
const langWrap2 = ref(null)

const handleScroll = () => {
  // 모바일 메뉴가 열려있으면 스크롤 위치와 상관없이 white 클래스 유지
  if (isMobileMenuOpen.value) {
    isScrolled.value = true
  } else {
    isScrolled.value = window.scrollY > 0
  }
}

const toggleLang = () => {
  isLangOpen.value = !isLangOpen.value
}

const toggleLang2 = () => {
  isLangOpen2.value = !isLangOpen2.value
}

const toggleMobileMenu = () => {
  isMobileMenuOpen.value = !isMobileMenuOpen.value;
}

const toggleAccordion = (section) => {
  if (activeAccordion.value === section) {
    activeAccordion.value = null
  } else {
    activeAccordion.value = section
  }
}

const handleClickOutside = (event) => {
  if (langWrap.value && !langWrap.value.contains(event.target)) {
    isLangOpen.value = false
  }
}

const handleClickOutside2 = (event) => {
  if (langWrap2.value && !langWrap2.value.contains(event.target)) {
    isLangOpen2.value = false
  }
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll)
  document.addEventListener('click', handleClickOutside)
  document.addEventListener('click', handleClickOutside2)
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  document.removeEventListener('click', handleClickOutside)
  document.removeEventListener('click', handleClickOutside2)
})
</script>