96 lines
3.4 KiB
Vue
96 lines
3.4 KiB
Vue
<script setup lang="ts">
|
|
import type { GameDataValue, GameDataGnb } from "#layers/types/api/gameData";
|
|
|
|
const gameDataStore = useGameDataStore();
|
|
|
|
const gameData = gameDataStore.gameData as GameDataValue;
|
|
const gnbList = gameData?.gnb?.menus as GameDataGnb["menus"];
|
|
</script>
|
|
|
|
<template>
|
|
<header
|
|
class="bg-theme-foreground text-theme-foreground-reversal relative z-50"
|
|
>
|
|
<LayoutStoveGnb />
|
|
<div
|
|
data-name="header-game"
|
|
class="px-[40px] h-16 flex items-center whitespace-nowrap"
|
|
>
|
|
<!-- 로고 -->
|
|
<div data-name="header-logo" class="mr-[40px]">
|
|
<AtomsLocaleLink to="/brand">
|
|
<img
|
|
:src="gameData?.gnb?.bi_path"
|
|
:alt="gameData?.game_name"
|
|
class="h-[30px]"
|
|
/>
|
|
</AtomsLocaleLink>
|
|
</div>
|
|
|
|
<!-- 메인 네비게이션 -->
|
|
<nav data-name="header-nav" class="flex items-center space-x-[32px]">
|
|
<template v-if="gnbList">
|
|
<div
|
|
v-for="(gnbItem, key) in gnbList"
|
|
:key="key"
|
|
class="relative group"
|
|
>
|
|
<!-- Link 컴포넌트 사용 -->
|
|
<MoleculesLink
|
|
:to="gnbItem.url_path"
|
|
:target="gnbItem.link_target"
|
|
class="relative flex items-center h-[64px]"
|
|
>
|
|
{{ gnbItem.menu_name }}
|
|
<AtomsIconsArrowDown v-if="gnbItem.children" class="ml-1" />
|
|
<span
|
|
class="absolute bottom-0 left-0 w-full h-2 border-b-2 border-transparent transition-border-color group-hover:border-theme-foreground-reversal group-active:border-theme-foreground-reversal-10"
|
|
></span>
|
|
</MoleculesLink>
|
|
<div
|
|
v-if="gnbItem.children"
|
|
class="absolute top-full left-[-28px] min-w-[190px] pt-[4px] pointer-events-none group-hover:pointer-events-auto"
|
|
>
|
|
<ul
|
|
class="bg-theme-foreground-10 rounded-[20px] shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 p-3"
|
|
>
|
|
<li v-for="child in gnbItem.children" :key="child.menu_name">
|
|
<!-- Link 컴포넌트 사용 -->
|
|
<MoleculesLink
|
|
:to="child.url_path"
|
|
:target="child.link_target"
|
|
class="flex items-center px-4 py-[9px] rounded-[12px] transition-background hover:bg-theme-foreground-reversal-40 active:bg-theme-foreground-reversal-70"
|
|
>
|
|
{{ child.menu_name }}
|
|
<AtomsIconsLinkOut
|
|
v-if="child.link_target === '_blank'"
|
|
class="ml-1"
|
|
/>
|
|
</MoleculesLink>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 구분선 -->
|
|
<div class="w-px h-4 bg-theme-foreground-reversal-30"></div>
|
|
|
|
<!-- 이벤트 -->
|
|
<a href="#" class="flex items-center space-x-[3px] text-gradient-pink">
|
|
<AtomsIconsStar />
|
|
<span>이벤트</span>
|
|
<AtomsIconsStar />
|
|
</a>
|
|
</nav>
|
|
|
|
<!-- 오른쪽 영역 -->
|
|
<div data-name="header-right" class="ml-auto">
|
|
<div class="relative group">
|
|
<AtomsButton size="small">게임 시작</AtomsButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
</template>
|