|
|
@@ -1,16 +1,12 @@
|
|
|
<template>
|
|
|
<header>
|
|
|
- <div class="header--wrap">
|
|
|
+ <div class="header--wrap" :class="{ 'white': isScrolled }">
|
|
|
<div class="header--container">
|
|
|
- <div class="logo--wrap">
|
|
|
- <NuxtLink to="/">
|
|
|
- <img src="/img/header--logo.svg" alt="그린웨일글로벌">
|
|
|
- </NuxtLink>
|
|
|
- </div>
|
|
|
+ <NuxtLink class="logo--wrap" to="/">그린웨일글로벌</NuxtLink>
|
|
|
<ul class="menu--wrap">
|
|
|
<li class="menu--item">
|
|
|
<NuxtLink to="/company/intro">Company</NuxtLink>
|
|
|
- <ul class="submenu">
|
|
|
+ <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>
|
|
|
@@ -18,28 +14,28 @@
|
|
|
</li>
|
|
|
<li class="menu--item">
|
|
|
<NuxtLink to="/products/materials">Products</NuxtLink>
|
|
|
- <ul class="submenu">
|
|
|
+ <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="submenu">
|
|
|
+ <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="submenu">
|
|
|
+ <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="submenu">
|
|
|
+ <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>
|
|
|
@@ -47,11 +43,51 @@
|
|
|
</ul>
|
|
|
</li>
|
|
|
</ul>
|
|
|
- <div class="lang--wrap">
|
|
|
+ <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>
|
|
|
</div>
|
|
|
</header>
|
|
|
-</template>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { ref, onMounted, onUnmounted } from 'vue'
|
|
|
+
|
|
|
+const isScrolled = ref(false)
|
|
|
+const isLangOpen = ref(false)
|
|
|
+const langWrap = ref(null)
|
|
|
+
|
|
|
+const handleScroll = () => {
|
|
|
+ isScrolled.value = window.scrollY > 0
|
|
|
+}
|
|
|
+
|
|
|
+const toggleLang = () => {
|
|
|
+ isLangOpen.value = !isLangOpen.value
|
|
|
+}
|
|
|
+
|
|
|
+const handleClickOutside = (event) => {
|
|
|
+ if (langWrap.value && !langWrap.value.contains(event.target)) {
|
|
|
+ isLangOpen.value = false
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ window.addEventListener('scroll', handleScroll)
|
|
|
+ document.addEventListener('click', handleClickOutside)
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ window.removeEventListener('scroll', handleScroll)
|
|
|
+ document.removeEventListener('click', handleClickOutside)
|
|
|
+})
|
|
|
+</script>
|
송용우
