286 lines
8.8 KiB
Vue
286 lines
8.8 KiB
Vue
<script setup lang="ts">
|
|
import { useGameDataStore } from '#layers/stores/useGameDataStore'
|
|
import { useScrollStore } from '#layers/stores/useScrollStore'
|
|
import { useWindowScroll, onClickOutside } from '@vueuse/core'
|
|
import { storeToRefs } from 'pinia'
|
|
import type {
|
|
GameDataValue,
|
|
GameDataMenu,
|
|
GameDataMenuChildren,
|
|
} from '#layers/types/api/gameData'
|
|
|
|
const route = useRoute()
|
|
const { y: windowY } = useWindowScroll()
|
|
const scrollStore = useScrollStore()
|
|
const { isPassedStoveGnb } = storeToRefs(scrollStore)
|
|
|
|
const gameDataStore = useGameDataStore()
|
|
const gameData = gameDataStore.gameData as GameDataValue
|
|
const gnbList = (gameData?.gnb?.menus ?? []) as GameDataMenuChildren
|
|
|
|
const isMenuOpen = ref(false)
|
|
const contentNavRef = ref<HTMLElement>()
|
|
|
|
const currentPath = computed(() => formatPathWithoutLocale(route.path))
|
|
|
|
const pathMatches = (base: string, current: string) => {
|
|
if (!base || base === '/') return current === '/'
|
|
return current === base || current.startsWith(base + '/')
|
|
}
|
|
|
|
/** header overlay 높이 계산 (re-compute 최소화) */
|
|
const scrollPositionPX = computed(() => {
|
|
const gnbHeight = scrollStore.stoveGnbHeight
|
|
const y = windowY.value
|
|
if (y === 0) return `${gnbHeight}px`
|
|
if (y >= gnbHeight) return '0px'
|
|
return `${gnbHeight - y}px`
|
|
})
|
|
|
|
/** 자식 중 활성 링크 존재 여부 */
|
|
const hasActiveChild = (children?: GameDataMenuChildren) => {
|
|
const cur = currentPath.value
|
|
return formatToArray(children).some(child => {
|
|
if (!child?.url_path || !isInternalUrl(child.url_path)) return false
|
|
return pathMatches(formatPathWithoutLocale(child.url_path), cur)
|
|
})
|
|
}
|
|
|
|
/** 1Depth 활성화 여부 */
|
|
const isNavItemActive = (gnbItem: GameDataMenu): boolean => {
|
|
const cur = currentPath.value
|
|
const base = gnbItem?.url_path
|
|
const selfActive =
|
|
!!base &&
|
|
isInternalUrl(base) &&
|
|
pathMatches(formatPathWithoutLocale(base), cur)
|
|
return selfActive || hasActiveChild(gnbItem.children)
|
|
}
|
|
|
|
const handleMenuOpen = () => (isMenuOpen.value = true)
|
|
const handleMenuClose = () => (isMenuOpen.value = false)
|
|
|
|
onClickOutside(contentNavRef, () => (isMenuOpen.value = false))
|
|
</script>
|
|
|
|
<template>
|
|
<header class="header">
|
|
<BlocksStoveGnb class="min-h-[48px]" />
|
|
|
|
<div class="header-game" :class="{ 'game-fixed': isPassedStoveGnb }">
|
|
<!-- 로고 -->
|
|
<div class="header-logo">
|
|
<AtomsLocaleLink to="/brand">
|
|
<img
|
|
:src="gameData?.gnb?.bi_path"
|
|
:alt="gameData?.game_name"
|
|
class="h-[30px]"
|
|
/>
|
|
</AtomsLocaleLink>
|
|
</div>
|
|
<button
|
|
class="btn-open"
|
|
aria-controls="site-menu"
|
|
:aria-expanded="isMenuOpen"
|
|
@click="handleMenuOpen"
|
|
>
|
|
<span class="sr-only">menu open</span>
|
|
</button>
|
|
<div
|
|
class="header-content"
|
|
:class="{ 'menu-open': isMenuOpen }"
|
|
:style="{ '--scroll-position': scrollPositionPX }"
|
|
>
|
|
<div id="site-menu" ref="contentNavRef" class="content-nav">
|
|
<button
|
|
class="btn-close"
|
|
aria-controls="site-menu"
|
|
:aria-expanded="isMenuOpen"
|
|
@click="handleMenuClose"
|
|
>
|
|
<span class="sr-only">menu close</span>
|
|
</button>
|
|
<div class="nav-logo">
|
|
<AtomsLocaleLink to="/brand">
|
|
<img
|
|
:src="gameData?.gnb?.bi_path"
|
|
:alt="gameData?.game_name"
|
|
class="h-[30px]"
|
|
/>
|
|
</AtomsLocaleLink>
|
|
</div>
|
|
<nav class="nav-main">
|
|
<div v-if="gnbList" class="main-official">
|
|
<div
|
|
v-for="(gnbItem, key) in gnbList"
|
|
:key="key"
|
|
class="nav-item"
|
|
>
|
|
<BlocksHybridLink
|
|
:to="gnbItem.url_path"
|
|
:target="gnbItem.link_target"
|
|
:class="`item-1depth ${isNavItemActive(gnbItem) ? 'active' : ''}`"
|
|
>
|
|
<span>{{ gnbItem.menu_name }}</span>
|
|
<AtomsIconsArrowDown v-if="gnbItem.children" />
|
|
</BlocksHybridLink>
|
|
|
|
<div v-if="gnbItem.children" class="item-2depth">
|
|
<ul>
|
|
<li
|
|
v-for="child in gnbItem.children"
|
|
:key="child.menu_name"
|
|
>
|
|
<BlocksHybridLink
|
|
:to="child.url_path"
|
|
:target="child.link_target"
|
|
>
|
|
<span>{{ child.menu_name }}</span>
|
|
<AtomsIconsLinkOut
|
|
v-if="child.link_target === '_blank'"
|
|
/>
|
|
</BlocksHybridLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="main-event">
|
|
<a href="#" class="item-1depth text-gradient-pink">
|
|
<AtomsIconsStar />
|
|
<span>이벤트</span>
|
|
<AtomsIconsStar />
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
<div class="btn-start">
|
|
<AtomsButton size="small" class="w-full md:w-auto">
|
|
게임 시작
|
|
</AtomsButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.header {
|
|
@apply bg-theme-foreground text-theme-foreground-reversal relative z-50;
|
|
}
|
|
.header-game {
|
|
@apply absolute flex w-full h-[48px] items-center whitespace-nowrap px-[64px] bg-theme-foreground md:h-16 md:px-[40px]
|
|
before:content-[''] before:absolute before:top-0 before:left-0 before:right-0 before:h-px before:bg-theme-foreground-reversal-6;
|
|
}
|
|
.game-fixed {
|
|
@apply fixed top-0 left-0;
|
|
}
|
|
.header-logo {
|
|
@apply mx-auto shrink-0 md:mx-0;
|
|
}
|
|
|
|
.btn-open,
|
|
.btn-close {
|
|
@apply absolute w-[40px] h-[40px] md:hidden bg-[red];
|
|
}
|
|
.btn-open {
|
|
@apply top-[4px] left-[12px];
|
|
}
|
|
.btn-close {
|
|
@apply top-[11px] left-[12px];
|
|
}
|
|
.btn-start {
|
|
@apply relative mt-2 px-5 md:ml-auto md:mt-0 md:px-0;
|
|
}
|
|
|
|
.header-content {
|
|
@apply overflow-hidden absolute top-0 left-0 w-0 md:overflow-visible md:static md:w-full md:h-full;
|
|
height: calc(100vh - var(--scroll-position));
|
|
}
|
|
.header-content.menu-open {
|
|
@apply w-full;
|
|
}
|
|
.header-content.menu-open::before {
|
|
@apply content-[''] absolute inset-0 w-[100vw] h-full bg-[rgba(0,0,0,0.6)] md:hidden;
|
|
}
|
|
.header-content.menu-open .content-nav {
|
|
@apply relative h-full translate-x-0 transition-transform duration-300 md:translate-x-0;
|
|
}
|
|
|
|
.content-nav {
|
|
@apply relative flex flex-col w-[360px] bg-theme-foreground-10 translate-x-[-100%]
|
|
md:flex-row md:w-full md:items-center md:h-full md:bg-transparent md:translate-x-0;
|
|
}
|
|
|
|
.nav-main {
|
|
@apply overflow-hidden flex flex-col order-1 h-full mt-2 mb-4 px-2
|
|
md:overflow-visible md:flex-row md:order-none md:h-full md:my-0 md:mx-10 md:px-0;
|
|
}
|
|
.main-official {
|
|
@apply overflow-y-auto pb-2 md:overflow-visible md:flex md:items-center md:space-x-8 md:pb-0;
|
|
}
|
|
|
|
.main-event {
|
|
@apply relative flex flex-col mb-2 md:flex-row md:mb-0 md:ml-16;
|
|
}
|
|
.main-event::before {
|
|
@apply content-[''] hidden absolute top-[23px] left-[-32px] w-px h-4 bg-theme-foreground-reversal-30 md:block;
|
|
}
|
|
.main-event::after {
|
|
@apply order-[-1] content-[''] h-px mb-2 mx-3 bg-theme-foreground-reversal-8
|
|
md:mb-0 md:mx-0 md:absolute md:bottom-0 md:left-0 md:w-full md:h-[2px] md:bg-theme-foreground-reversal md:opacity-0;
|
|
}
|
|
.main-event:hover::after {
|
|
@apply opacity-100;
|
|
}
|
|
|
|
.nav-logo {
|
|
@apply flex items-center justify-center shrink-0 h-[62px] md:hidden;
|
|
}
|
|
|
|
.nav-item {
|
|
@apply relative flex flex-col text-[16px] md:items-center md:h-full;
|
|
}
|
|
.nav-item:last-of-type::after {
|
|
@apply hidden;
|
|
}
|
|
.nav-item::after {
|
|
@apply content-[''] h-px my-2 mx-3 bg-theme-foreground-reversal-8 md:hidden;
|
|
}
|
|
.nav-item:hover .item-1depth::after,
|
|
.item-1depth.active::after {
|
|
@apply opacity-100 md:transition-opacity;
|
|
}
|
|
.nav-item:hover .item-2depth {
|
|
@apply md:opacity-100 md:visible md:pointer-events-auto md:transition-opacity md:duration-200;
|
|
}
|
|
|
|
.item-1depth {
|
|
@apply flex items-center py-[9px] px-3 gap-1 rounded-[12px] md:h-full md:py-0 md:px-0;
|
|
}
|
|
.item-1depth::after {
|
|
@apply md:content-[''] md:absolute md:bottom-0 md:left-0 md:w-full md:h-[2px] md:bg-theme-foreground-reversal md:opacity-0;
|
|
}
|
|
.item-1depth.active {
|
|
@apply bg-theme-foreground-reversal-8 md:bg-transparent;
|
|
}
|
|
|
|
.item-2depth {
|
|
@apply block text-[15px] md:opacity-0 md:absolute md:top-full md:left-[-28px] md:min-w-[190px] md:pt-1 md:pointer-events-none;
|
|
}
|
|
.item-2depth ul {
|
|
@apply bg-theme-foreground-10 rounded-[20px] md:shadow-lg md:p-3;
|
|
}
|
|
.item-2depth a {
|
|
@apply flex items-center gap-1 px-5 py-[9px] rounded-[12px] transition-colors
|
|
hover:bg-theme-foreground-reversal-4 active:bg-theme-foreground-reversal-10
|
|
md:px-4 md:py-[11px];
|
|
}
|
|
|
|
@media (min-width: 1024px) {
|
|
.header-content {
|
|
height: 100%;
|
|
}
|
|
}
|
|
</style>
|